super关键字总结
11/20/2025, 2:52:48 PM
#JavaScript#历史文章迁移
ES6的继承里,有用到super这个关键词。它既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。
一、作为函数调用时,代表父类的构造函数
class A {}
class B extends A {
constructor() {
super();
}
}
注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B的实例。而且,作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错
二、super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类
请注意以下几点:
- 由于
super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。示例如下:
class A {
constructor() {
this.p = 2;
}
}
class B extends A {
get m() {
return super.p;
}
}
let b = new B();
b.m // undefined
- ES6 规定,在子类普通方法中通过
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
- 由于
this指向子类实例,所以如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。示例如下:
class A {
constructor() {
this.x = 1;
}
}
class B extends A {
constructor() {
super();
this.x = 2;
super.x = 3; // 这里的super相当于this
console.log(super.x); // undefined (这里super)
console.log(this.x); // 3
}
}
let b = new B();
- 如果
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
另外,在子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例。