深入理解JavaScript类评估顺序：MDN解析与实践-js教程-PHP中文网

深入理解JavaScript类评估顺序：MDN解析与实践

霞舞

发布： 2025-11-19 17:01:28

原创

595人浏览过

深入理解javascript类评估顺序：mdn解析与实践

本文旨在深入解析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()调用返回之前（对于派生类）。”

TapNow

新一代AI视觉创作引擎

115

查看详情

这部分描述，特别是关于派生类的部分，有时会引起混淆。让我们通过一个具体的例子来详细解析其实际执行顺序。

考虑以下类结构：

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）：
1. 派生类构造函数开始。
2. 调用super()。
3. 基类实例字段被初始化。
4. 基类构造函数体执行。
5. super()返回，this在派生类中可用。
6. 派生类实例字段被初始化。
7. 派生类构造函数体剩余部分执行。