JavaScript 中 let 在循环中的作用域机制解析

一、let在循环中的特殊性

let作为ES6引入的块级作用域声明，在循环结构中存在特殊行为，其核心区别于var的函数作用域特性。理解这一特性对于编写正确的闭包逻辑至关重要。

在 ECMAScript 规范里，let声明的变量具有块级作用域特性，这彻底改变了 JavaScript 原有的作用域规则。在 ES6 之前，JavaScript 只有全局作用域和函数作用域，var声明的变量在函数内是共享的，这在循环结合闭包的场景下容易引发问题。而let的出现填补了块级作用域的空白，为开发者提供了更细粒度的作用域控制。

二、循环头声明：每次迭代创建独立作用域

当let在for循环头部声明变量时，JavaScript引擎会为每次迭代创建独立的块级作用域，并将变量绑定到该作用域中。即使循环体为空，这种作用域隔离机制依然生效。

示例代码：

const arr = [];  
for (let i = 0; i < 2; i++) {  arr.push(() => console.log(i));  
}  
arr[0](); // 输出：0（捕获第一次迭代的i）  
arr[1](); // 输出：1（捕获第二次迭代的i）  

执行机制：

1. 第一次迭代：创建作用域Scope1，i初始值为0，闭包捕获Scope1中的i。
2. 第二次迭代：创建新作用域Scope2，i初始值基于前次迭代为1，闭包捕获Scope2中的i。
3. 闭包调用：分别访问各自作用域中的i值，输出0和1。

在ECMAScript 2024 规范的 14.7.5 The for Statement 章节的 LetAndConstDeclarationInForInitializer 部分明确指出：当let或const声明出现在for循环的头部时，会被特殊处理。每次循环迭代都会为let或const声明的变量创建一个新的词法环境，变量的初始值取自前一次迭代的环境。这确保了在循环体中创建的闭包会捕获它们创建时所在迭代的变量值，而非循环结束后的最终值。

NOTE 2
When a let or const declaration occurs in the head of a for loop, it is interpreted specially. Each iteration of the loop creates a new lexical environment for the variables declared with let or const, and the initial value of the variable is taken from the previous iteration’s environment. This ensures that closures created within the loop body capture the variable’s value from the iteration in which they were created, rather than the value after the loop completes.

三、循环体声明：基于代码块的作用域创建

当let在循环体内部声明变量时，每次执行循环体代码块{}会创建新的块级作用域，变量被绑定到该作用域。

示例代码：

const arr = [];  
for (var i = 0; i < 2; i++) {  let j = i; // 每次迭代创建新作用域  arr.push(() => console.log(j));  
}  
arr[0](); // 输出：0  
arr[1](); // 输出：1  

关键区别：

• 循环头的let i是引擎特殊优化，自动为每次迭代创建作用域。
• 循环体的let j依赖代码块结构，每次执行循环体时创建作用域。

这种在循环体中基于代码块创建作用域的方式，遵循let声明变量的块级作用域基本规则。只要代码执行进入包含let声明的代码块，就会创建新的作用域，将声明的变量限制在该代码块内。在循环场景下，每次循环执行循环体这个代码块时，自然也会为let声明的变量创建新作用域。

四、与var的对比：共享全局作用域导致的闭包陷阱

使用var声明变量时，所有闭包共享同一个全局作用域中的变量，导致捕获的是循环结束后的最终值。

示例代码：

const arr = [];  
for (var i = 0; i < 2; i++) {  arr.push(() => console.log(i));  
}  
arr[0](); // 输出：2（循环结束时i=2）  
arr[1](); // 输出：2  

原因分析：

• var的函数作用域特性导致整个循环中只有一个i。
• 闭包捕获的是全局作用域中的i，循环结束时其值为2。

在 ES6 之前，由于var声明变量的函数作用域特性，在循环中创建闭包时，闭包捕获的是共享的全局作用域中的变量。这就导致在循环结束后，所有闭包访问到的变量值都是循环结束时该变量的最终值，无法获取到每次迭代时变量的不同值。

五、特殊场景：循环体内部修改块级变量

若在循环体内部修改let声明的变量，闭包将捕获修改后的值。

示例代码：

const arr = [];  
for (var i = 0; i < 2; i++) {  let j = i;  j++; // 修改块级变量  arr.push(() => console.log(j));  
}  
arr[0](); // 输出：1（第一次迭代j=0+1）  
arr[1](); // 输出：2（第二次迭代j=1+1）  

执行机制：

• 每次迭代创建新作用域，j初始化为i，修改后闭包捕获新值。

当在循环体内部修改let声明的变量时，因为每次迭代都有独立的作用域，修改的是当前作用域内的变量。闭包捕获的正是所在作用域内变量修改后的最终值，所以会输出修改后的值。

六、总结：闭包与作用域的交互规则

1. 闭包捕获变量引用：闭包捕获的是变量的引用，而非创建闭包时变量的值。
2. let的块级作用域：在循环头或循环体中使用let，会为每次迭代/执行创建独立作用域。
3. var的函数作用域：所有闭包共享同一个变量，导致捕获最终值。

这一特性是 ES6 对 JavaScript 作用域机制的重要改进，避免了传统闭包陷阱，使代码逻辑更符合直觉。从规范层面看，let在循环中的这些特性有明确的定义和规则，从实际应用角度，这些特性为开发者编写可靠、易维护的 JavaScript 代码提供了有力支持。无论是在前端开发中处理 DOM 事件绑定，还是在复杂的 JavaScript 应用程序中管理变量作用域和闭包逻辑，理解和运用好let在循环中的作用域机制都至关重要。