ES6中的super关键字

super这个关键字，既能够看成函数使用，也能够看成对象使用。在这两种状况下，它的用法彻底不一样。

第一种状况，super做为函数调用时，表明父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。

class A {}

class B extends A {
  constructor() {
    super();
  }
}

 

上面代码中，子类B的构造函数之中的super()，表明调用父类的构造函数。这是必须的，不然 JavaScript 引擎会报错。

注意，super虽然表明了父类A的构造函数，可是返回的是子类B的实例，即super内部的this指的是B，所以super()在这里至关于A.prototype.constructor.call(this)。

第二种状况，super做为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
例1：普通方法

class A {
  p() {
    return 2;
  }
}

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

let b = new B();

 

上面代码中，子类B当中的super.p()，就是将super看成一个对象使用。这时，super在普通方法之中，指向A.prototype，因此super.p()就至关于A.prototype.p()。

这里须要注意，因为super指向父类的原型对象，因此定义在父类实例上的方法或属性，是没法经过super调用的。

若是super做为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。
例2：静态方法

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }

  myMethod(msg) {
    console.log('instance', msg);
  }
}

class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }

  myMethod(msg) {
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

var child = new Child();
child.myMethod(2); // instance 2

 

–参考自阮一峰《ES6》