ES6 Class 中 super 关键字的双重用法详解

ES6 Class 中 super 关键字的双重用法详解

以下是关于ES6 Class中super关键字的学习笔记整理。

super关键字具有双重身份，既可作为函数调用，也可作为对象访问，且两种情况下的行为机制截然不同。

作为函数调用

一、作为函数调用

class A {}
class B extends A {
 constructor() {
  super(); //ES6 要求，子类的构造函数必须执行一次super函数。
 }
}

尽管super引用了父类A的构造函数，但其返回值实际上是子类B的实例。这意味着super内部的this指向子类B，因此super()的执行逻辑等同于A.prototype.constructor.call(this)。

class A {
 constructor() {
  console.log(new.target.name); //new.target指向当前正在执行的函数
 }
}
class B extends A {
 constructor() {
  super();
 }
}
new A() // A
new B() // B

在super()执行期间，其指向的是子类B的构造函数而非父类A，即super内部的this始终绑定于子类B。

作为对象访问

二、作为对象访问

在类的普通方法中，super指向父类的原型对象；而在静态方法中，super则直接指向父类本身。

class A {
 c() {
  return 2;
 }
}
class B extends A {
 constructor() {
  super();
  console.log(super.c()); // 2
 }
}
let b = new B();

在子类B的代码中，若将super视为对象并调用super.c()，此时super指向父类A的原型（即A.prototype），故super.c()等价于A.prototype.c()。

当通过super调用父类方法时，super会强制绑定子类当前的this上下文。

class A {
 constructor() {
  this.x = 1;
 }
 s() {
  console.log(this.x);
 }
}
class B extends A {
 constructor() {
  super();
  this.x = 2;
 }
 m() {
  super.s();
 }
}
let b = new B();
b.m() // 2

在示例代码中，super.s()虽然调用的是A.prototype.s()，但由于该方法内部绑定了子类B的this，导致输出结果为2而非1。实质上，这等同于执行了super.s.call(this)。

由于super绑定了子类的this，若通过super对某属性进行赋值，此时super等同于this，所赋值的属性将直接成为子类实例的属性。

class A {
 constructor() {
  this.x = 1;
 }
}
class B extends A {
 constructor() {
  super();
  this.x = 2;
  super.x = 3;
  console.log(super.x); // undefined
  console.log(this.x); // 3
 }
}
let b = new B();

在示例代码中，super.x被赋值为3，这等同于对this.x赋值为3。然而，当读取super.x时，实际读取的是A.prototype.x，因此返回undefined。

使用super时，必须明确指定其是作为函数还是对象使用，否则将触发语法错误。

class A {}
class B extends A {
 constructor() {
  super();
  console.log(super); // 报错
 }
}

在示例中，直接console.log(super)无法判断其上下文类型（函数或对象），导致JavaScript引擎解析时抛出错误。若能明确super的数据类型，则可避免此类报错。

鉴于对象均继承自其他对象，super关键字可在任意对象上下文中使用。

总结

以上是对ES6 Class中super关键字的详细介绍，希望能为读者提供帮助。如有疑问欢迎留言，小编将及时回复。感谢支持！