根本原因是var无块级作用域导致循环变量共享，解决关键是为每次迭代创建独立绑定：let声明最推荐；IIFE仅用于ES5兼容；forEach天然隔离索引；DOM事件中可用let或dataset属性。
JavaScript 中循环变量在异步操作中输出错误值（比如全为最后一个索引），根本原因不是“闭包有问题”，而是 var 声明的变量没有块级作用域，导致所有回调共享同一个变量绑定。解决的关键，是让每次迭代拥有独立的变量绑定——闭包只是实现这一目标的机制之一，而现代写法已不再依赖传统闭包来“模拟”块级作用域。
let 声明直接提供块级绑定（最推荐）
ES6+ 中，let 在 for 循环中每轮迭代都会创建一个新的绑定，每个 setTimeout 或事件监听器自然捕获当次的 i 值：
- 无需额外函数包装，语义清晰、性能好
- 适用于 for、for...of、for...in 等所有循环结构
- 浏览器和 Node.js 环境普遍支持（2026 年已无兼容顾虑）
示例：
for (let i = 0; i console.log(i), 100); // 输出：0, 1, 2 }
IIFE 手动构造闭包（仅限 ES5 兼容场景）
在必须支持老旧环境（如 IE）时，用立即执行函数表达式（IIFE）把当前 i 的值作为参数传入，形成独立作用域：
- 参数 index 是形参，每次调用都生成新副本，内部函数闭包捕获的是该副本
- 必须显式传参：
(function(index) { ... })(i)，不能省略括号或漏掉参数 - 本质是用函数作用域“模拟”块级作用域
示例：
for (var i = 0; i console.log(index), 100); })(i); // 此处 i 是实参，被复制给 index }
forEach 天然隔离索引（适合数组遍历）
数组的 forEach 方法每次调用回调函数都是独立执行，index 参数本身就是当次迭代的值，无需任何闭包技巧：
- 简洁安全，避免手动管理索引
- 不适用于类数组对象（如 arguments、NodeList），需先转数组
- 无法使用 break/continue，也不支持反向或条件跳过
示例：
[0, 1, 2].forEach((item, index) => {
setTimeout(() => console.log(index), 100); // 输出：0, 1, 2
});
事件监听中的实际应用
为多个 DOM 元素绑定点击事件时，同样适用上述逻辑：
- 用
let声明索引或元素引用，确保每个 handler 访问对应数据 - 也可把关键数据存为元素的
dataset属性，回调中直接读取，彻底解耦作用域依赖 - 避免在循环内直接用
var i+this组合，容易因 this 指向或变量覆盖出错
示例（data 属性方式）：
const buttons = document.querySelectorAll('button');
buttons.forEach((btn, i) => {
btn.dataset.index = i;
btn.addEventListener('click', () => console.log(btn.dataset.index));
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
