ES6的继承

阮一峰ES6标准入门

1.ES6中继承的特点

ES5的继承的实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
另一个需要注意的地方是，在子类的构造函数中，只有调用super之后才可以使用this关键字，否则会报错。这是因为子类实例的构建是基于对父类实例的加工，只有super方法才能返回父类实例。

class Point() {
    constructor(x, y) {
    this.x = x;
    this.y = y;
    }
}

class ColorPoint extends Point {
    constructor(x, y, color) {
    this.color = color; // RefreenceError
    super(x, y);
    this.color = color; // 正确
    }
}

2.super的使用

super这个关键字既可以当做函数使用，也可以当做对象使用。在两种情况下，它们的用法完全不同。

1.super作为函数调用时代表父类的构造函数。ES6要求，子类的构造函数必须执行一次super函数。

class A() {}

class B() {
    constructor() {
        super();     // 调用父类的构造函数
    }
}

super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指向B，因此super()这里相当于A.prototype.constructor.call(this)。

作为函数使用时，super()只能用在子类的构造函数之中，用在其他的地方就会报错。

2.super作为对象使用时，在普通的方法中指向父类的原型对象；在静态方法中指向父类。

class A {
    constructor() {
        this.p = 2;    // p是父类A实例的属性
    }
}
class B extends A {
    get m() {
        return super.p;
    }
}

let b = new B();
b.m          // undefined

class A {}
class B extends A {
    constructor() {
        super();
        console.log(super.x) //2
    }
}

let b = new B();

3.原生构造函数的继承

ES5中原生构造函数会出现的问题：

function MyArray() {
    Array.apply(this, arguments);
}
MyArray.prototype = Object.create(Array.prototype, {
    constructor: {
        value: MyArray,
        writable: true,
        configurable: true,
        enumerable: true
    }
});
// 上面的代码定义了一个继承Array的MyArray类，但是，这个类的行为与Array完全不一致
var colors = new MyArray();
colors[0] = 'red';
colors.length // 0

colors.length = 0;
colors[0]     // 'red'

之所以会发生这种情况，是因为子类无法获得原生构造函数的内部属性，通过Array.apply()或者分配给原型对象都不行。原生构造函数会忽略apply方法传入的this，也就是说原生构造函数的this无法绑定，导致拿不到内部属性。

ES5先新建子类的实例对象this，再讲父类的属性添加到子类上，由于父类的内部属性无法获取，导致无法继承原生的构造函数。
ES6允许继承原生构造函数继承子类，因为ES6先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。