用ES6解决ES5中原型、构造、继承三大难题

今天药忘吃喽~ 2022-04-08 10:49 171阅读 0赞

##  ES6中新加入的三个特性 class、extends、 super ##

这三个特性涉及了ES5中最令人头疼的原型、构造和继承。解决了ES5中晦涩难懂的语法和乱七八糟的指针。

class Animal {
        constructor(){
            this.type = 'animal'
        }
        says(say){
            console.log(this.type + ' says ' + say)
        }
    }
    
    let animal = new Animal()
    animal.says('hello') //animal says hello
    
    class Cat extends Animal {
        constructor(){
            super()
            this.type = 'cat'
        }
    }
    
    let cat = new Cat()
    cat.says('hello') //cat says hello

上面代码首先用**`class`**定义了一个“类”，可以看到里面有一个**`constructor`**方法，这就是构造方法，而**`this`**关键字则代表实例对象。简单地说，**`constructor`**内定义的方法和属性是实例对象自己的，而**`constructor`**外定义的方法和属性则是所有实例对象可以共享的。

**Class**之间可以通过**`extends`**关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个**Cat**类，该类通过**`extends`**关键字，继承了**Animal**类的所有属性和方法。

**super**关键字，它指代父类的实例（即父类的this对象）。子类必须在**`constructor`**方法中调用**super**方法，否则新建实例时会报错。这是因为子类没有自己的**this**对象，而是继承父类的**this**对象，然后对其进行加工。如果不调用**super**方法，子类就得不到**this**对象。

ES6的继承机制，实质是先创造父类的实例对象**this**（所以必须先调用**super**方法），然后再用子类的构造函数修改**this**。

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6中的继承

class People { constructor(name, age, phone) { this.na...

左手的ㄟ右手/ 2024年04月19日 13:00/ 0 赞/ 70 阅读

相关 ES5和ES6中的继承

Javascript中的继承一直是个比较麻烦的问题，prototype、constructor、\_\_proto\_\_在构造函数，实例和原型之间有的复杂的关系，不仔细捋下很

男娘i/ 2023年06月15日 12:28/ 0 赞/ 5 阅读

相关 Js-ES6类的使用，ES5原型和继承

Ⅰ- 壹 - 类 1. 类是抽象的对象是真实存在的。对象就是类的实例化体现，类就是对象的抽象化表现 2. 基类（BaseClass）基础的类别 3. 父类 4

朱雀/ 2022年11月27日 12:07/ 0 赞/ 233 阅读

相关 9. JavaScript 构造函数和原型、ES5继承

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： [2019全新javaScript进阶面向对象ES6][2019_j

╰+攻爆jí腚メ/ 2022年10月08日 11:10/ 0 赞/ 186 阅读

相关 ES5和ES6继承的区别

ES5的继承方法可以看这篇： [https://blog.csdn.net/qq593249106/article/details/83098432][https_blog

Dear 丶/ 2022年05月09日 15:26/ 0 赞/ 252 阅读

相关 ES5和ES6继承

ES5常用七种继承方案和ES6的类继承，有八种继承方案。 ES5：原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、混入方式继承

深碍√TFBOYSˉ_/ 2022年04月24日 15:14/ 0 赞/ 352 阅读

相关 ES5/ES6中的类与继承对比

ES5中的类和静态方法 function Persion(name,age) { //构造函数里面的方法和属性 this.name = nam

妖狐艹你老母/ 2022年04月16日 01:37/ 0 赞/ 305 阅读

相关用ES6解决ES5中原型、构造、继承三大难题

ES6中新加入的三个特性 class、extends、 super 这三个特性涉及了ES5中最令人头疼的原型、构造和继承。解决了ES5中晦涩难懂的语法和乱七八糟的指针。

今天药忘吃喽~/ 2022年04月08日 10:49/ 0 赞/ 172 阅读

相关 ES5和ES6继承

1.ES6继承 class Book{ constructor(title,pages,isbn){ this.title = tit

骑猪看日落/ 2022年01月23日 05:11/ 0 赞/ 349 阅读

相关 ES6继承

class通过extends关键字继承写法如下 calss People { } class Man extends People{

逃离我推掉我的手/ 2021年09月03日 08:58/ 0 赞/ 477 阅读