(在构造函数中)调用 super(props) 的目的是什么

目的：

在 super() 被调用之前，子类是不能使用 this 的，ES6 要求，子类的构造函数必须执行一次super函数，否则 JavaScript 引擎会报错。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

super是什么？怎么用？

super是关键词
角色：1、当函数使用。 2、当对象使用。

1、super当函数使用

super作为函数调用时，代表调用父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。这是必须的，否则 JavaScript 引擎会报错。

使用准则：

• 子类super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例。

2、super当对象使用

使用准则：

• 在子类普通方法中，super指向父类的原型对象
• 在子类静态方法中，super指向父类。

1、在子类普通方法中，super指向父类的原型对象

• （1）由于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就引用不到它

• （2）在子类普通方法中通过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(); // 相当于执行 super.print.call(this)
  }
}

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

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

2、在子类静态方法中，指向父类。

• （1）如果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); // 作为对象，在静态方法中，该super指向父类，而不是父类的原型
  }
// 子类原型中方法
  myMethod(msg) {
    super.myMethod(msg); // 作为对象，在普通方法中，该super指向父类原型
  }
}

// 直接调用子类的方法myMethod,
Child.myMethod(1); // static 1

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

通过这个例子，了解到：普通方法是归属于类的原型。 静态方法归属于该类。

• （2）在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例。

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

B.x = 3 : 是给B类添加属性x为3，
B.m() : 在静态方法super指向父类的print方法，该方法内部的this指向B类，而非B类实例，而因为B类中的x为3，B的实例中x为2，所以B.m()为3.

参考文章： super关键字