深入理解JavaScript中立即调用类表达式（IICE）及其继承机制-js教程-PHP中文网

深入理解JavaScript中立即调用类表达式（IICE）及其继承机制

聖光之護

发布： 2025-11-23 10:52:08

原创

628人浏览过

深入理解JavaScript中立即调用类表达式（IICE）及其继承机制

本文深入探讨javascript中立即调用类表达式（immediately invoked class expression, iice）的执行机制，特别是当其涉及多层继承时。我们将通过一个嵌套的类表达式实例，详细解析其构造函数调用顺序、`this`上下文的绑定，以及实例属性的初始化时机，揭示常见的潜在陷阱并提供解决方案，帮助开发者更好地理解和运用复杂的类结构。

什么是立即调用类表达式（IICE）？

在JavaScript中，立即调用函数表达式（IIFE）是一种常见的模式，用于创建私有作用域并立即执行代码。类似地，立即调用类表达式（Immediately Invoked Class Expression, IICE）允许我们定义一个类并在定义后立即实例化它，而无需为该类指定一个具名标识符。其基本形式通常是 new (class MyClass { /* ... */ })()。这种模式常用于创建单例、封装特定逻辑或在不污染全局命名空间的情况下快速创建一个实例。

解析嵌套的立即调用类表达式

我们将通过一个复杂的嵌套立即调用类表达式的例子来深入理解其内部机制：

new (class C extends class B {
  constructor() {
    console.log(this.foo());
  }
} {
  num = 1;
  foo() {
    return this.num;
  }
})();

登录后复制

为了更好地理解这段代码的执行过程，我们可以将其分解为几个步骤：

定义内部父类 B 首先，我们有一个匿名的类表达式，可以将其视为一个名为 B 的类（尽管它在实际代码中是匿名的）。这个类定义了一个构造函数，并在其中调用了 this.foo()。
```
class B {
  constructor() {
    console.log(this.foo()); // 这里的 this.foo() 是关键
  }
}
```
登录后复制
这个类表达式的计算结果是一个构造函数，我们可以将其抽象地称为 B。

立即学习“Java免费学习笔记（深入）”；
定义外部子类 C 继承 B 接下来，我们定义另一个匿名的类表达式 C，它继承了上一步生成的 B 类。这个 C 类定义了一个实例属性 num 和一个方法 foo()。
```
class C extends B { // C 继承了 B
  num = 1; // 实例属性
  foo() {
    return this.num;
  }
}
```
登录后复制
同样，这个类表达式的计算结果是一个构造函数，我们将其抽象地称为 C。
立即实例化子类 C 最后，整个表达式被 new (...)() 包裹，这意味着我们立即创建了类 C 的一个实例。
```
new (C)(); // 相当于 new C()
```
登录后复制
所以，原始代码的本质是声明一个父类 B，声明一个子类 C 继承 B，然后立即实例化 C。

继承链中的构造函数与属性初始化

在理解了代码结构后，我们来分析其执行流程和关键概念：

1. 父子类识别

父类 (Parent Class): class B { ... }
子类 (Child Class): class C extends B { ... }

2. 构造函数调用顺序

当通过 new C() 实例化子类时，JavaScript 的类继承机制会确保父类的构造函数在子类的构造函数之前被调用。具体步骤如下：

Tana

“节点式”AI智能笔记工具，支持超级标签。

查看详情

执行 new C()。
JavaScript 引擎开始执行 C 的构造函数。即使 C 没有显式定义 constructor，也会有一个隐式的构造函数，其中包含 super() 调用。
在 C 的构造函数内部（无论是显式还是隐式），super() 会被调用。
super() 调用会执行父类 B 的构造函数。
在 B 的构造函数中，console.log(this.foo()) 被执行。
B 的构造函数执行完毕。
回到 C 的构造函数，此时 C 的实例属性 num = 1 才会被初始化。
C 的构造函数执行完毕，实例创建完成。

3. this 上下文与属性初始化时机

这里的关键在于 B 的构造函数中 this.foo() 的调用时机。在继承链中，this 始终指向最终被实例化的那个对象，即子类 C 的实例。因此，当 B 的构造函数执行 this.foo() 时，它实际上是在调用 C 实例上的 foo 方法。

然而，问题出在 C 的实例属性 num = 1 的初始化时机。根据ECMAScript规范，子类的实例属性是在 super() 调用之后、子类构造函数体执行之前（或在子类构造函数体中，如果 super() 是第一条语句）才会被初始化。

这意味着，当 B 的构造函数被调用时：

this 已经指向 C 的实例。
this.foo() 会被调用，它会尝试访问 this.num。
但此时，C 类的实例属性 num = 1 尚未被初始化。

因此，this.num 的值在 B 的构造函数中是 undefined，导致 this.foo() 返回 undefined，最终 console.log 输出 undefined。

解决方案与最佳实践

为了使代码按照预期输出 1，我们需要确保在 B 的构造函数中访问 this.num 时，num 属性已经被初始化。最直接的解决方案是将 num 属性的定义移动到父类 B 中，使其在 B 的构造函数执行之前作为 B 的实例属性被初始化。

new (class C extends class B {
  num = 1; // 将 num 属性定义移到父类 B 中
  constructor() {
    console.log(this.foo());
  }
} {
  // num = 1; // 子类中不再需要定义
  foo() {
    return this.num;
  }
})();

登录后复制

解释： 当 num = 1 被定义在 B 类中时，它成为了 B 的实例属性。这意味着在 B 的构造函数执行之前，num 属性就已经被初始化为 1。因此，当 B 的构造函数中调用 this.foo() 时，this.num 将正确地返回 1。

注意事项：

属性初始化顺序： 务必理解在类继承中，父类构造函数先执行，然后才是子类的实例属性初始化和子类构造函数体。
避免在父类构造函数中依赖子类属性： 这是一个常见的陷阱。如果父类构造函数需要依赖子类的特定属性或方法，应确保这些属性或方法在父类构造函数执行时已经可用（例如，通过在父类中定义默认值，或者将依赖项作为参数传递给父类构造函数）。
this 的指向： 在整个继承链中，this 始终指向最终创建的子类实例，即使在父类的构造函数中也是如此。