目的:
在 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关键字