所有闭包都读到同一个值，根本原因是var声明的变量具有函数作用域，循环中仅创建一个i绑定，闭包捕获的是该变量的引用而非值；修复方式包括改用let、IIFE封装或forEach，同时需防范引用类型修改和内存泄漏风险。
JavaScript 中闭包在循环里访问变量，最常出问题的地方是：所有回调函数最终都输出同一个值——循环结束后的变量终值，而不是每次迭代时的值。根本原因在于变量作用域和闭包捕获机制的配合出了偏差。
为什么所有闭包都读到同一个值
当用 var 声明循环变量（比如 for (var i = 0; i ），这个 <code>i 是函数作用域的，整个循环只创建一个 i 变量。所有在循环中定义的函数（如 setTimeout 回调、事件监听器）都闭包引用了这同一个 i 的内存地址。等异步任务真正执行时，循环早已结束，i 已变成 3，于是全部输出 3。
- 闭包捕获的是变量的“引用”，不是创建时的“快照”
-
var没有块级作用域，无法为每次迭代隔离变量 - 问题不局限于
setTimeout，也出现在addEventListener、Promise.then、fetch().then等异步或延迟执行场景
怎么一眼识别这个问题
只要看到以下现象，基本就能断定掉进了这个陷阱：
- 遍历数组生成多个事件处理器，点击任意一项都拿到最后一个索引或最后一项数据
-
setTimeout打印的数字全是循环上限（比如预期 0/1/2，实际全输出 3） - React 列表渲染中，每个按钮的
onClick都读取到相同的index或item.id - 调试时发现循环体内
console.log(i)正常递增，但回调里始终是最大值
三种可靠解法及适用场景
核心思路都是为每次迭代提供独立的变量绑定，避免共享引用：
立即学习“Java免费学习笔记（深入）”；
-
首选：用
let声明循环变量 —— ES6+ 标准做法，简洁安全。每次迭代自动创建新绑定：for (let i = 0; i console.log(i)); } -
兼容旧环境：IIFE 封装 —— 把当前
i作为参数传入立即执行函数，形成私有作用域：for (var i = 0; i console.log(i)); })(i); } -
替代循环结构：用
forEach—— 数组方法天然提供独立形参，[0,1,2].forEach(i => setTimeout(() => console.log(i)))无需额外处理
容易被忽略的延伸风险
除了基础循环变量，还有两类情况同样危险：
-
引用类型变量被中途修改：比如在循环中把对象赋给
config，之后又改了它的属性，闭包里读到的就是修改后的新值。需要提前提取关键字段（const savedUrl = config.url）或做浅拷贝 -
未清理的定时器或监听器：闭包长期持有 DOM 节点或大数据，又没清除
setInterval或removeEventListener，容易引发内存泄漏
