一文搞懂super关键字

一文搞懂super关键字

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

情况一：super为函数的情况

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

class A{}

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

子类B的构造函数之中的super()，代表调用父类的构造函数。这是必须的，否则js会报错。
注意，super虽然代表的是父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于B.prototype.constructor.call(this)

class A{
	constructor(){
		console.log(new.target.name)
}
}

上面代码中，new.target指向当前正在执行的函数。可以看到，在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。
作为函数的时候，super只能出现在子类的构造函数之中，用在其它地方会报错

class A {}

class B extends A {
  m() {
    super(); // 报错
  }
}

情况二：super作为对象的情况

super作为对象的时候，在普通方法中，指向父类的原型对象，在静态方法中，指向父类

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调用的

class A {
  constructor() {
    this.p = 2;
  }
}

class B extends A {
  get m() {
    return super.p;
  }
}

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

p是父类A实例的属性，super.p就引用不到它，如果属性定义在父类的原型上，wuper就可以取到

class A {}
A.prototype.x = 2;

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

let b = new B();

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

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}

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

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

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}

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

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

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

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

class A {
  constructor() {
    this.x = 1;
  }
  static print() {
    console.log(this.x);
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  static m() {
    super.print();
  }
}

B.x = 3;
B.m() // 3

注意：使用super得时候一定要显示指定是作为函数还是对象来使用，否则报错

class A {}

class B extends A {
  constructor() {
    super();
    console.log(super.valueOf() instanceof B); // true
  }
}

let b = new B();

这里表明super是一个对象，因此不报错，由于super使得this指向B的实例，所以super。valueOf()返回的是一个B的实例