第一种情况,super作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super函数。

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

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

    1. class A {
    2. constructor() {
    3. console.log(new.target.name);
    4. }
    5. }
    6. class B extends A {
    7. constructor() {
    8. super();
    9. }
    10. }
    11. new A() // A
    12. new B() // B

    上面代码中,new.target指向当前正在执行的函数。可以看到,在super()执行时,它指向的是子类B的构造函数,而不是父类A的构造函数。也就是说,super()内部的this指向的是B

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

    1. class A {}
    2. class B extends A {
    3. m() {
    4. super(); // 报错
    5. }
    6. }

    上面代码中,super()用在B类的m方法之中,就会造成语法错误。

    第二种情况,super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

    1. class A {
    2. p() {
    3. return 2;
    4. }
    5. }
    6. class B extends A {
    7. constructor() {
    8. super();
    9. console.log(super.p()); // 2
    10. }
    11. }
    12. let b = new B();

    这里需要注意,由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。

    上面代码中,p是父类实例的属性,super.p就引用不到它。

    如果属性定义在父类的原型对象上,super就可以取到。

    1. class A {}
    2. A.prototype.x = 2;
    3. class B extends A {
    4. constructor() {
    5. super();
    6. }
    7. }
    8. let b = new B();

    上面代码中,属性x是定义在A.prototype上面的,所以super.x可以取到它的值。

    ES6 规定,在子类普通方法中通过super调用父类的方法时,方法内部的this指向当前的子类实例。

    1. class A {
    2. constructor() {
    3. this.x = 1;
    4. }
    5. print() {
    6. console.log(this.x);
    7. }
    8. }
    9. class B extends A {
    10. constructor() {
    11. super();
    12. this.x = 2;
    13. }
    14. m() {
    15. super.print();
    16. }
    17. }
    18. let b = new B();
    19. b.m() // 2

    上面代码中,super.print()虽然调用的是A.prototype.print(),但是A.prototype.print()内部的this指向子类B的实例,导致输出的是2,而不是1。也就是说,实际上执行的是super.print.call(this)

    由于this指向子类实例,所以如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。

    1. class A {
    2. constructor() {
    3. this.x = 1;
    4. }
    5. }
    6. class B extends A {
    7. constructor() {
    8. super();
    9. this.x = 2;
    10. super.x = 3;
    11. console.log(super.x); // undefined
    12. console.log(this.x); // 3
    13. }

    如果super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象。

    上面代码中,super在静态方法之中指向父类,在普通方法之中指向父类的原型对象。

    另外,在子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例。

    1. class A {
    2. constructor() {
    3. this.x = 1;
    4. }
    5. static print() {
    6. console.log(this.x);
    7. }
    8. }
    9. class B extends A {
    10. constructor() {
    11. super();
    12. this.x = 2;
    13. }
    14. static m() {
    15. super.print();
    16. }
    17. }
    18. B.x = 3;
    19. B.m() // 3

    上面代码中,静态方法B.m里面,super.print指向父类的静态方法。这个方法里面的this指向的是B,而不是B的实例。

    注意,使用super的时候,必须显式指定是作为函数、还是作为对象使用,否则会报错。

    1. class A {}
    2. class B extends A {
    3. constructor() {
    4. super();
    5. console.log(super); // 报错
    6. }
    7. }

    上面代码中,console.log(super)当中的super,无法看出是作为函数使用,还是作为对象使用,所以 JavaScript 引擎解析代码的时候就会报错。这时,如果能清晰地表明super的数据类型,就不会报错。

    1. class A {}
    2. class B extends A {
    3. constructor() {
    4. super();
    5. console.log(super.valueOf() instanceof B); // true
    6. }
    7. }
    8. let b = new B();

    上面代码中,super.valueOf()表明super是一个对象,因此就不会报错。同时,由于super使得this指向B的实例,所以super.valueOf()返回的是一个B的实例。