JavaScript深度继承中super构造函数的工作原理探究

首先，你的理解方向是对的，但咱们可以把这个过程拆解得更精准，帮你理清super的实际行为：

先看你的代码示例：

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

完整构造流程拆解 #

当你执行new C()时，整个过程是这样的：

• 第一步：new操作符先创建一个全新的对象obj，这个对象的内部[[Prototype]]会被设置为C.prototype。
• 第二步：调用C的构造函数，此时构造函数内部的this会绑定到刚创建的obj上。
• 第三步：C的构造函数里调用super()——这里的super()本质是调用父类B的构造函数，并且自动把当前的this（也就是obj）作为this传递给B的构造函数。
• 第四步：进入B的构造函数，内部的this同样是obj，然后调用super()，也就是调用A的构造函数，同样把obj传递给A的构造函数。
• 第五步：A没有自定义构造函数，所以使用默认的基类构造函数，它啥也不做，直接返回obj。
• 第六步：回到B的构造函数，执行super()之后的代码（这里没有额外代码），然后返回obj。
• 第七步：回到C的构造函数，执行super()之后的代码（也没有额外代码），最后返回obj。
• 第八步：new C()的最终结果就是这个被所有构造函数处理过的obj。

对你的问题的解答 #

你问“新创建的对象会先在构造函数间向上冒泡，再向下传递？”——这个描述有点接近，但更准确的说法是：

全程只有一个对象，就是new一开始创建的那个obj。构造逻辑的执行顺序是从子类向上走到基类，再从基类回到子类，整个过程中所有构造函数操作的都是同一个对象，不存在“对象传递”，而是同一个对象被继承链上的所有构造函数依次初始化/修改。

补充几个关键细节 #

• 子类构造函数必须先调用super()才能使用this，因为ES6规范要求，子类的this是由父类构造函数完成初始化的（虽然对象是new先创建的，但父类构造函数会完成必要的原型链关联等操作）。
• 如果类没有写自定义的constructor，JS会自动生成默认构造函数：
  • 基类（比如A）的默认构造是constructor() {}，啥也不做。
  • 子类（比如B、C）的默认构造是constructor() { super(); }，也就是自动调用父类构造函数。

内容的提问来源于stack exchange，提问作者Slev7n