Javascript深度继承和 super 构造函数

Question

我正在尝试弄清楚 super 在 JavaScript 中的真正作用。我有一个想法，但我不确定它是否准确，所以我需要一些帮助。

class A {

}

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

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

new C

在上面的代码中，‘new’运算符创建了一个对象并将其链接到构造函数 C 的原型(prototype)，构造函数 C 的隐藏属性“thisArg”现在指向新创建的对象

+---------------------+
|   function object   |
+---------------------+
| - code              |
+---------------------+
| - outerScope        |
+---------------------+
| - thisArg           |
+---------------------+
| - [[Prototype]]     |
+---------------------+
| + prototype         |
+---------------------+
| + length            |
+---------------------+
| + name              |
+---------------------+

注意隐藏属性 thisArg 可以在每次函数调用时更改，隐式(使用访问运算符“.”和“[]”)、显式(使用 .call、.apply、.bind 方法)或使用“new”运算符

然后，词法环境的“this”引用将指向 thisArg 指向的任何函数隐藏属性

回到流程。 构造函数C被执行然后super将新创建的对象传递给构造函数B，构造函数B的隐藏属性thisArg现在指向新创建的对象

构造函数 B 也是如此，它被执行并且 super 将新创建的对象传递给开始构造的 A 构造函数

当 A 完成构造时，它将对象向下传递给 B

然后 B 向结构中添加更多插槽并向下传递给 C

最后C结束构造，返回构造的对象

那么基本上，新创建的对象首先从一个构造函数冒泡到另一个构造函数，然后滴落下来？

Answer 1

这不是 class 的工作方式。它的构造部分与旧的基于 function 的设置接近正确，但 class 在这方面的工作方式略有不同。

当您执行 new C 时，直到调用 A 构造函数时才会创建对象。这是发生了什么:

1. new 调用 C 的 [[Construct]] new.target 设置为 C 的内部方法。
   1. super() 运行之前的任何 C 代码。 this 此时无法访问。
   2. C 的代码使用 new.target 调用 B 的 [[Construct]](通过 super()) 仍然设置为 C。
      1. 在 super() 运行之前 B 中的任何代码。 this 仍然可以访问。
      2. B 使用 new.target 调用 A 的 [[Construct]](通过 super()) > 仍然设置为 C。
         1. 因为 A 是基础构造函数，A 的 [[Construct]] 创建对象，从 prototype 属性设置它的原型(prototype)new.target(即 C)。
         2. A 构造函数中的任何代码都可以运行，并且可以访问 this。
      3. super() 运行后 B 中的任何代码(并且可以访问 this)。
   3. super() 运行后 C 中的任何代码(并且可以访问 this)。
2. A 创建的对象是 new 表达式的结果。

(为了清楚起见，我跳过了上面的一些次要细节。)

这就是 class 结构如何确保新对象按顺序从基本构造函数 (A) 到第一个派生的构造函数 (B) 和最后的 new 目标 (C)。这样，A 首先可以访问新对象，然后是 B，然后是 C。

更多内容在上面的规范链接中。