阮一峰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，使得父类的一切行动都能够继续。