ES6继承

Posted cff2121

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6继承相关的知识,希望对你有一定的参考价值。

1.继承方式

ES6中使用extends关键字实现继承

class subType extends superType{
    ...
}

与es5的继承,子类创建自己的this,然后父类对其加工不同,es6的继承原理是,继承父类的this,并在此基础上进行修改。因此,实现继承必须要在constructor中调用父类的构造函数,super:

class subType extends superType{
    constructor(){
        super();
        ...
    }
}

如果子类没有定义constructor函数,那么将默认添加这个方法。

 

2.super关键字

1.super当作函数

super当作函数只能放在constructor()函数中进行使用,表示父类的构造函数。

2.super当作对象

super当作对象又可分为表示子类的this,和表示父类

2.1super表示子类的this

当对super进行赋值操作时,super被当成是子类的this。对super的某属性进行赋值就相当于对子类的this中的该属性进行赋值操作。

class subType extends superType{
    constructor(){
        super();
        this.name="sub";
        super.name="haha"
        console.log(this.name);   //"haha"
    }
}

2.2super表示父类对象

当对super进行取值操作时,super表示父类对象

class superType{
    showName(){
        console.log(this.name);
    }
}

class subType extends superType{
    constructor(){
        super();
        this.name="sub";
        super.showName();   //"sub"
    }
}

这里表示在子类上下文中调用父类的showName方法,因此showName的this是子类的this

 

prototype属性

子类的__proto__属性指向父类,表示构造函数的继承。

子类的prototype的__proto__指向父类的prototype:表示原型的继承。

三种特殊情况:

1.子类继承Object

class A extends Object{
}
A.__proto__===Object//true
A.prototype.__proto__===Object.prototype//true

2.子类没有任何继承

class A{
}
A.__proto__===Function.prototype//true
A.prototype.__proto__===Object.prototype//true

3.子类继承null

class A extends Null{
}
A.__proto__===Object//true
A.prototype.__proto__===undefined//true

 

原生构造函数的继承

ES6可以对原生的构造函数进行继承和修改。ES5不能构造函数的修改,是因为ES5的继承方式是创建自己的this,然后调用父类构造函数进行修改,原生构造函数会忽略通过apply改变this的操作。而ES6直接继承父类的this。

 

以上是关于ES6继承的主要内容,如果未能解决你的问题,请参考以下文章

es6之class继承

ES6中class的实现原理

30秒就能看懂的JavaScript 代码片段

javaScript闭包实现类与继承(非ES6)

带有(ES6)类和继承的Angular.js DI

es6继承 vs js原生继承(es5)