ECMAScript 规范中的 for 循环：深入理解其执行机制与作用域管理

本文深入探讨了 ECMAScript 规范中 `for` 循环的执行机制，重点解析了其如何通过词法环境（LexicalEnvironment）管理作用域，特别是 `let` 和 `const` 声明的变量如何为每次迭代创建独立的绑定。我们将剖析 `ForLoopEvaluation`、`ForBodyEvaluation` 和 `CreatePerIterationEnvironment` 等抽象操作，揭示 `for` 循环在底层实现变量隔离的原理，并澄清相关概念，以帮助开发者更透彻地理解 JavaScript 的作用域行为。

1. for 循环的初始设置：ForLoopEvaluation

当 JavaScript 引擎遇到一个 for 循环语句，例如 for (let i = 0; i < 10; i++) { ... }，它会首先执行 ForLoopEvaluation 抽象操作来初始化循环。这一阶段的核心任务是建立循环的初始词法环境（LexicalEnvironment）和绑定循环变量。

1. 创建循环环境 (loopEnv): 引擎会创建一个新的声明式环境记录（Declarative Environment Record），称之为 loopEnv。这个 loopEnv 的外部环境（[[OuterEnv]]）指向当前运行执行上下文的词法环境（oldEnv）。随后，当前运行执行上下文的 LexicalEnvironment 会被设置为这个新创建的 loopEnv。

2. 绑定循环变量: 如果 for 语句的初始化部分包含词法声明（LexicalDeclaration，即使用 let 或 const 声明变量），这些变量的名称（boundNames）会在 loopEnv 中进行绑定。

   • 对于 const 声明的变量，会创建不可变绑定（ImmutableBinding）。
   • 对于 let 声明的变量，会创建可变绑定（MutableBinding）。 这些变量的初始值会通过评估 LexicalDeclaration 来设置。

这一步确保了循环变量（如 i）在循环外部环境之上拥有自己的独立作用域，为后续的迭代环境创建奠定了基础。

2. 循环体的迭代评估：ForBodyEvaluation

ForBodyEvaluation 是 for 循环的核心迭代逻辑所在。它负责处理循环条件、执行循环体语句以及处理增量表达式，并循环往复，直到条件不再满足。

1. 逐次迭代环境的创建: 在每次循环迭代开始时（甚至在第一次条件检查之前），引擎会调用 CreatePerIterationEnvironment 抽象操作。这是理解 let 和 const 在 for 循环中“每次迭代都有新变量”行为的关键。

2. 条件评估: 如果 test 表达式存在（即循环条件，如 i < 10），引擎会评估它。如果评估结果转换为布尔值 false，则循环终止，并返回之前迭代中累积的结果 V。

3. 循环体执行: 如果条件为 true，引擎会执行 stmt（循环体语句）。

4. 增量表达式评估: 在循环体执行完毕后，如果 increment 表达式存在（如 i++），引擎会评估它。

这个过程在一个 Repeat 循环中进行，直到 test 条件不满足或遇到 break、continue 等中断指令。

3. 逐次迭代环境的创建：CreatePerIterationEnvironment

CreatePerIterationEnvironment 是 for 循环中 let/const 变量实现“块级作用域”和“每次迭代独立作用域”的关键。它解释了为什么 for (let i = 0; ...) 中的 i 在每次迭代中表现得像一个新变量。

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

21

查看详情

核心机制：

1. 判断是否存在迭代绑定 (perIterationBindings): 如果 for 循环的初始化部分使用了 let 或 const 声明了变量（这些变量构成 perIterationBindings 列表），则会执行以下步骤：

2. 获取上一次迭代的环境 (lastIterationEnv): lastIterationEnv 被设置为当前运行执行上下文的 LexicalEnvironment。

   • 对于第一次迭代，lastIterationEnv 就是在 ForLoopEvaluation 中创建的 loopEnv。
   • 对于后续迭代，lastIterationEnv 则是前一次迭代中创建的 thisIterationEnv。

3. 创建新的迭代环境 (thisIterationEnv): 引擎会创建一个全新的声明式环境记录 thisIterationEnv。

   • 关键点：thisIterationEnv 的外部环境（[[OuterEnv]]）被设置为 lastIterationEnv 的外部环境 (lastIterationEnv.[[OuterEnv]])。这意味着，每次迭代创建的新环境，其父级环境都是循环外部的那个环境，而不是前一次迭代的环境。这确保了每次迭代的变量绑定是独立的，但它们仍然可以访问循环外部的变量。

4. 绑定和初始化迭代变量: 对于 perIterationBindings 中的每个变量 bn：

   • 在 thisIterationEnv 中创建一个可变绑定（CreateMutableBinding）。
   • 从 lastIterationEnv 中获取 bn 的当前值（GetBindingValue）。
   • 使用获取到的值来初始化 thisIterationEnv 中的 bn 绑定（InitializeBinding）。

5. 更新运行执行上下文的词法环境: 最后，当前运行执行上下文的 LexicalEnvironment 被设置为新创建的 thisIterationEnv。

澄清概念：

这里需要强调的是，尽管规范中提到“运行执行上下文的 LexicalEnvironment”，但这不意味着每次迭代都会创建一个新的执行上下文。相反，它指的是在当前运行的执行上下文内部，其 LexicalEnvironment 指针会不断地在不同的词法环境记录之间切换。lastIterationEnv 始终是前一个有效的词法环境，而 thisIterationEnv 是为当前迭代新创建的。这种机制确保了 let 和 const 变量在每次循环迭代中都拥有一个“新鲜”的绑定，即使它们的名称相同。

4. let/const 与 var 在 for 循环中的区别

CreatePerIterationEnvironment 的存在，是 let/const 与 var 在 for 循环中行为差异的根本原因。

使用 let 的示例：

for (let i = 0; i < 3; i++) {
  setTimeout(() => {

以上就是ECMAScript 规范中的 for 循环：深入理解其执行机制与作用域管理的详细内容，更多请关注php中文网其它相关文章！