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

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

DDD

发布： 2025-11-23 12:33:01

原创

835人浏览过

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

本文深入探讨javascript中立即调用类表达式（iice）的执行机制，通过一个嵌套继承的示例，详细解析其声明、继承、实例化及构造函数调用顺序。我们将识别父子类关系，揭示属性初始化时序对结果的影响，并提供修正方案，旨在帮助开发者理解此类复杂结构的行为和潜在陷阱。

1. 立即调用类表达式（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;
  }
})();

登录后复制

这段代码看似复杂，但通过逐步分解，我们可以清晰地理解其执行机制。

2. 代码结构解析与执行流程

为了更好地理解上述代码，我们将其从内到外进行分解。

立即学习“Java免费学习笔记（深入）”；

2.1 内部类声明：父类 B

首先，我们关注最内部的类声明：

class B {
  constructor() {
    console.log(this.foo());
  }
}

登录后复制

这是一个标准的类声明，定义了一个名为 B 的类。在JavaScript中，类声明的本质是创建一个构造函数。因此，class B { ... } 实际上生成了一个名为 B 的构造函数。这个构造函数在实例化时会执行 console.log(this.foo())。

2.2 外部类声明：子类 C

接下来，我们将内部的 class B 视为一个已定义的实体（即构造函数 B），那么整个表达式可以简化为：

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

登录后复制

这里，我们声明了另一个匿名类，为了便于理解，我们称之为 C。这个类 C 通过 extends B 继承了类 B。因此，B 是父类，C 是子类。

类 C 包含一个实例属性 num，初始化为 1，以及一个方法 foo()，用于返回 this.num。

2.3 类的实例化

最后，整个表达式 new (C)() 或者简化为 new C()，表示立即实例化这个匿名子类 C。

微撰

AI智能写作平台

207

查看详情

2.4 构造函数执行顺序与方法调用

当 new C() 被执行时，其内部的执行流程如下：

创建实例对象： JavaScript引擎首先创建一个新的空对象，并将其原型链指向 C.prototype。
调用父类构造函数： 接着，会自动调用父类 B 的构造函数。在 B 的 constructor 中，执行 console.log(this.foo())。
- 此时，this 指向的是正在被创建的 C 的实例。
- this.foo() 会被调用。由于 C 继承了 B，并且 C 自身定义了 foo() 方法，因此会调用 C 实例上的 foo() 方法。
初始化子类实例属性： 父类构造函数执行完毕后，才会初始化子类 C 中声明的实例属性 num = 1。
调用子类构造函数： 如果子类 C 有自己的 constructor（本例中没有显式定义，但会有一个隐式的 constructor），则会执行。

3. 深入分析：属性初始化与执行时序问题

根据上述执行顺序，我们可以发现一个关键问题：在父类 B 的 constructor 中调用 this.foo() 时，子类 C 的实例属性 num = 1 尚未被初始化。

在JavaScript类的继承中：

父类的构造函数会首先执行。
子类的实例属性（如 num = 1）是在父类构造函数执行完毕后，但在子类自身构造函数（如果存在且显式调用 super()）执行之前进行初始化的。

因此，当 B 的 constructor 调用 this.foo() 时，this.num 实际上还未被赋值，其值为 undefined。所以，原始代码的输出结果是 undefined。

// 原始代码执行结果
undefined

登录后复制

4. 解决方案与最佳实践

要解决 undefined 的问题，我们需要确保在 B 的 constructor 调用 this.foo() 时，num 属性已经存在并被正确初始化。一种直接的方法是将 num 属性的声明移动到父类 B 中。

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

登录后复制

在这个修正后的版本中：

当 new C() 实例化时，会先创建实例对象。
调用父类 B 的 constructor。
在 B 的 constructor 执行之前，B 中声明的实例属性 num = 1 会被初始化到实例上。
然后 B 的 constructor 执行 console.log(this.foo())。此时 this.num 已经为 1。
this.foo() 返回 1。

因此，修正后的代码将输出 1。

// 修正后代码执行结果
1

登录后复制

注意事项：

属性初始化时机： 在涉及类继承和构造函数调用的复杂场景中，务必清晰理解实例属性的初始化时机。ES6 类中的实例属性（Class Field）在父类构造函数执行后、子类构造函数执行前初始化。
设计考量： 立即调用类表达式通常用于创建单例、封装私有逻辑或动态生成类等高级场景。在设计此类结构时，应仔细考虑其生命周期、继承关系和属性访问权限。
避免副作用： 尽量避免在父类构造函数中调用子类中定义但依赖子类属性的方法，除非你明确知道这些属性在调用时已经初始化。如果必须如此，可以考虑将属性提升到父类，或者在子类构造函数中重写父类逻辑以确保属性的正确初始化。