本文旨在深入解析JavaScript类在MDN文档中提及的评估顺序，澄清开发者常见的困惑。我们将重点探讨`extends null`为何会抛出`TypeError`及其解决方案，并详细阐述实例字段与构造函数在基类和派生类中的实际执行顺序，通过代码示例帮助读者建立清晰的认知。
在JavaScript中，类的评估顺序是理解其行为和避免意外结果的关键。MDN Web Docs提供了关于类评估顺序的详细说明，但其中一些表述可能导致初学者产生疑问。本文将针对这些常见困惑进行深入剖析，并提供清晰的解释和实用的代码示例。
一、extends null的特殊处理与TypeError解析
MDN关于类评估顺序的第一点指出：“如果存在extends子句，它会首先被评估。它必须评估为一个有效的构造函数或null，否则会抛出TypeError。”
然而，当我们尝试以下代码时：
立即学习“Java免费学习笔记（深入）”；
class bar extends null {}
// TypeError: Super constructor null of bar is not a constructor这似乎与MDN的描述相悖，因为null被明确允许。那么，为什么会抛出TypeError呢？
核心原因：super()调用机制
问题不在于extends null本身在语法上是否被允许，而在于派生类构造函数中super()的调用机制。在JavaScript中，如果一个类扩展了另一个类（包括null），其构造函数中必须调用super()。super()的职责是调用父类的构造函数，并初始化this绑定。
当一个类扩展了null时，实际上并没有一个“父类构造函数”可以被super()调用来初始化this。super()期望从其调用的“父构造函数”那里获得一个对象来作为派生类的this。由于null不是一个函数，无法被调用，也无法返回一个对象，因此在尝试执行super()时，JavaScript引擎会抛出TypeError，提示null不是一个构造函数。
MDN的补充说明与解决方案
MDN的“Extending null”章节对此有进一步的解释：extends null旨在允许轻松创建不继承自Object.prototype的对象。然而，由于super()在构造函数中如何被调用的未决决策，实际上无法使用任何不返回对象的构造函数实现来构造这样的类。
要成功创建一个扩展null的类，我们需要在构造函数中手动创建并返回一个对象，从而绕过super()隐式初始化this的机制：
class NullClass extends null {
constructor() {
// 使用 new.target.prototype 确保派生类拥有正确的原型链
return Object.create(new.target.prototype);
}
}
const proto = Object.getPrototypeOf;
const instance = new NullClass();
console.log(proto(instance)); // NullClass.prototype
console.log(proto(proto(instance))); // null (证明不继承自 Object.prototype)在这个工作示例中，constructor显式地返回了一个通过Object.create创建的对象。这满足了构造函数必须返回一个对象的预期，并且由于我们没有显式调用super()，也就避免了因null不是构造函数而引发的TypeError。
注意事项：
- 虽然extends null在特定场景下（如创建纯数据对象）有其价值，但其使用相对复杂，需要对原型链和构造函数行为有深入理解。
- 在大多数情况下，如果需要一个不继承自Object.prototype的对象，更常见的做法是使用Object.create(null)。
二、实例字段与构造函数的执行顺序
MDN关于实例字段评估顺序的描述是：“对于每个实例字段（公共或私有），其初始化表达式被保存。该初始化器在实例创建期间评估，在构造函数开始时（对于基类）或在super()调用返回之前（对于派生类）。”
这部分描述，特别是关于派生类的部分，有时会引起混淆。让我们通过一个具体的例子来详细解析其实际执行顺序。
考虑以下类结构：
class F {
x = (() => {
console.log("1. F: 实例字段 x 初始化");
return 1;
})();
constructor() {
console.log("2. F: 构造函数体执行");
this.y = 10;
}
}
class P extends F {
j = (() => {
console.log("3. P: 实例字段 j 初始化");
return 2;
})();
constructor() {
console.log("4. P: 构造函数开始，即将调用 super()");
super(); // 调用父类构造函数
console.log("5. P: super() 调用返回，P 的构造函数体继续");
this.k = 20;
}
}
let p = new P();当我们运行new P()时，实际的输出顺序和评估流程如下：
-
new P()：派生类P的构造函数开始执行。
- 输出: 4. P: 构造函数开始，即将调用 super()
-
P的构造函数中调用super()。
- 控制权转移到基类F的构造函数。
-
基类F的实例字段初始化。
- 在F的构造函数体执行之前，F的所有实例字段（如x）会被初始化。
- 输出: 1. F: 实例字段 x 初始化
-
基类F的构造函数体执行。
- 输出: 2. F: 构造函数体执行
- this.y = 10 被执行。
-
基类F的构造函数执行完毕，super()调用返回。
- 此时，基类部分的对象已经完全构建完成，this在派生类P中变得可用。
- 输出: 5. P: super() 调用返回，P 的构造函数体继续
-
派生类P的实例字段初始化。
- 在P的构造函数体剩余部分执行之前，P的所有实例字段（如j）会被初始化。这对应MDN描述的“在super()调用返回之前”——更准确的理解是，在super()返回且基类部分初始化完成后，但派生类自身的构造函数体代码执行之前。
- 输出: 3. P: 实例字段 j 初始化
-
派生类P的构造函数体剩余部分执行。
- this.k = 20 被执行。
最终输出顺序：
4. P: 构造函数开始，即将调用 super() 1. F: 实例字段 x 初始化 2. F: 构造函数体执行 5. P: super() 调用返回，P 的构造函数体继续 3. P: 实例字段 j 初始化
总结与关键点：
- 基类（Base Class）： 实例字段在构造函数体开始执行之前被初始化。
-
派生类（Derived Class）：
- 派生类构造函数开始。
- 调用super()。
- 基类实例字段被初始化。
- 基类构造函数体执行。
- super()返回，this在派生类中可用。
- 派生类实例字段被初始化。
- 派生类构造函数体剩余部分执行。
理解这个精确的评估顺序对于编写健壮的JavaScript类至关重要，特别是在处理继承和字段依赖时。它确保了基类在派生类之前完全初始化，并且实例字段在构造函数逻辑开始处理它们之前就已就绪。
