#yyds干货盘点#ES6 Class 的继承

类的继承​​extends​​简介

Class 可以通过​​extends​​关键字实现继承，让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多。

class Point {
}

class ColorPoint extends Point {
}

上面示例中，​​Point​​​是父类，​​ColorPoint​​​是子类，它通过​​extends​​​关键字，继承了​​Point​​​类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个​​Point​​类。

下面，我们在​​ColorPoint​​内部加上代码。

class Point { /* ... */ }

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

上面示例中，​​constructor()​​方法和​​toString()​​方法内部，都出现了​​super​​关键字。​​super​​在这里表示父类的构造函数，用来新建一个父类的实例对象。

​

子类必须在​​constructor()​​​方法中调用​​super()​​

ES6 规定，子类必须在​​constructor()​​方法中调用​​super()​​，否则就会报错。

​这是因为子类自己的​​​this​​​对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用​​​​super()​​​​​方法，子类就得不到自己的​​​​this​​​​对象。

class Point { /* ... */ }

class ColorPoint extends Point {
  constructor() {
  }
}

let cp = new ColorPoint(); // ReferenceError

上面代码中，​​ColorPoint​​继承了父类​​Point​​，但是它的构造函数没有调用​​super()​​，导致新建实例时报错。

​

ES6 的继承机制，与 ES5 完全不同

为什么子类的构造函数，一定要调用​​super()​​？原因就在于 ES6 的继承机制，与 ES5 完全不同。

• ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。
• ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”。 这就是为什么 ES6 的继承必须先调用​​super()​​方法，因为这一步会生成一个继承父类的​​this​​对象，没有这一步就无法继承父类。

注意，这意味着新建子类实例时，父类的构造函数必定会先运行一次。

class Foo {
  constructor() {
    console.log(1);
  }
}

class Bar extends Foo {
  constructor() {
    super();
    console.log(2);
  }
}

const bar = new Bar();
// 1
// 2

上面示例中，子类 Bar 新建实例时，会输出1和2。原因就是子类构造函数调用​​super()​​时，会执行一次父类构造函数。

​

子类的构造函数中，调用​​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; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}

上面代码中，子类的​​constructor()​​​方法没有调用​​super()​​​之前，就使用​​this​​​关键字，结果报错，而放在​​super()​​之后就是正确的。

如果子类没有定义​​constructor()​​​方法，这个方法会默认添加，并且里面会调用​​super()​​​。也就是说，不管有没有显式定义，任何一个子类都有​​constructor()​​方法。

class ColorPoint extends Point {
}

// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

有了子类的定义，就可以生成子类的实例了。

let cp = new ColorPoint(25, 8, 'green');

cp instanceof ColorPoint // true
cp instanceof Point // true

上面示例中，实例对象​​cp​​同时是​​ColorPoint​​和​​Point​​两个类的实例，这与 ES5 的行为完全一致。