JS循环闭包陷阱：用let替代var解决变量共享问题

一、现象重现：经典的循环计数器陷阱

初学者在编写循环异步逻辑时，常会写出如下代码。期望结果是每隔 100 毫秒依次打印出当前循环的序号 0, 1, 2, 3, 4：

// 陷阱代码示例：使用 var 声明循环变量
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

// 实际控制台输出结果：
// 5
// 5
// 5
// 5
// 5

运行结果并未如愿递增，而是连续打印了 5 次数字 5。如果把定时器换成按钮列表的点击事件监听，现象同样存在：无论点击哪一个按钮，弹出的索引值都是循环总长度。这种现象并不是事件监听或定时器出现了故障，而是由 JavaScript 变量提升、作用域管理及闭包捕获机制共同决定的预期行为。

二、原因剖析：为什么 var 会导致变量共享？

要彻底理解这一问题，需要从作用域机制与闭包的本质两个层面进行拆解：

• var 缺乏块级作用域：在 ES6 之前，JavaScript 只有全局作用域和函数作用域，不存在块级作用域（Block Scope）。在 for (var i = 0; ...) 中声明的变量 i 会被直接提升到外层函数作用域（若处于顶层则直接挂载至全局）。整场循环自始至终在内存中只有唯一的 i 变量。
• 闭包捕获的是引用而非值快照：setTimeout 中的匿名函数形成了闭包。闭包保存的是对外部变量 i 的实时词法引用，而不是在定义函数那一瞬间将 i 的数字值复制一份。
• 同步循环与异步执行的时间差：JavaScript 是单线程执行模型，所有的同步代码优先在主调用栈中执行。在 100 毫秒后定时器回调被事件循环推入主栈执行时，整个 for 循环早已同步执行完毕，此时 i 的值已经由于 i++ 递增到了 5 并使得 i < 5 判定为 false 终止循环。五个回调沿着作用域链查找 i，读取到的自然全都是最终的共享值 5。

三、解决方案演进：从 IIFE 闭包传参到 ES6 let

1. 历史兼容方案：立即执行函数（IIFE）

在 ES6 普及之前，开发者无法使用块级作用域，通常需要借助立即执行函数表达式（IIFE）来手动创建新的函数作用域，并将当前的循环变量以实参传入：

// 历史方案：使用立即执行函数保留循环状态
for (var i = 0; i < 5; i++) {
  (function(currentI) {
    setTimeout(function() {
      console.log(currentI);
    }, 100);
  })(i);
}

在这种写法中，外层函数每次循环都会立即执行一次，把当前的 i 作为形参 currentI 传入。由于函数参数是按值传递的基础类型，形参 currentI 在各自独立的函数作用域中被锁定，内部的 setTimeout 闭包捕获的是局部形参，因此能够正确输出 0, 1, 2, 3, 4。但这种方案增加了函数调用开销，结构嵌套层级较深，代码可读性较差。

2. 现代标准方案：直接将 var 替换为 let

在 ES6 及更高版本中，只需将声明关键字从 var 改为 let：

// 现代标准方案：使用 let 声明
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

// 实际控制台输出：
// 0
// 1
// 2
// 3
// 4

四、排查与重构指南：四步落地修复

在实际业务代码中，循环闭包陷阱常常隐藏在更加复杂的业务包装中。可以通过以下四个具体步骤进行系统化排查与修复：

1. 识别陷阱特征：检查代码中是否存在“在循环体内直接定义异步函数或事件处理函数，并且该函数引用了循环变量”的模式。只要看到输出全部停留在最大值或最后一个元素，即可判定触发了闭包共享。
2. 审查声明作用域：检查循环计数器是使用 var 声明的，还是意外写在了循环外部。如果变量暴露在函数或全局层级，就会发生共享。
3. 重构为 let 绑定：将 for (var i = 0; ...) 替换为 for (let i = 0; ...)。如果旧代码中存在为了绕开陷阱而编写的 IIFE，可一并精简重构，使代码回归直观。
4. 断点验证确认：在浏览器控制台（Chrome DevTools）的 Sources 面板中，在回调函数内部打上断点。观察右侧的 Scope 栏目：若使用 let，会明确显示一个 Block 作用域，里面存储着当前迭代专有的 i；若使用 var，只会显示包含最终值 5 的 Global 或 Local 作用域。

五、注意事项与易混淆细节

在使用 let 替代 var 的过程中，有以下几个需要特别注意的边界情况：

1. 循环外部无法访问 let 声明的变量

var 声明的变量具有函数作用域，因此即使在 for 循环结束后，外部代码依然可以访问到 i（例如读取最终循环执行了多少次）。但 let 是严格的块级作用域，循环外部访问会直接抛出 ReferenceError: i is not defined：

for (let i = 0; i < 3; i++) {
  // i 仅在循环头与循环体块内有效
}
console.log(i); // 抛出错误：ReferenceError: i is not defined

如果业务逻辑确实需要在循环外部获知迭代计数，应在循环外部单独声明一个变量，并在循环内部同步更新它，而不是倒退回使用 var。

2. for...in 与 for...of 中的 const 与 let

在传统的带计数器 for (;;) 循环中，因为每次递增都需要修改变量值（i++），所以必须使用 let 而不能使用 const。但在遍历集合的 for...of 和 for...in 循环中，由于每次迭代都是全新绑定且不需要在循环体内对变量重新赋值，推荐优先使用 const，同样具有块级隔离的效果：

const list = ['A', 'B', 'C'];
for (const item of list) {
  setTimeout(() => console.log(item), 100);
}
// 依次正常输出: A, B, C

六、方案全景总结

处理 JavaScript 循环中的异步变量传递共有四种常见思路，其特性对比如下：

总的来说，var 在循环中引发的闭包陷阱本质上是作用域缺失与异步执行时间差碰撞的结果。现代 JavaScript 开发中，全面拥抱 let 与 const，不仅语法简洁优雅、语义清晰，还能从语言语法底层直接规避此类变量共享缺陷。