使用立即执行函数解决JS循环中闭包捕获变量错误

一、现象复现：循环闭包中的经典“输出一致”问题

在编写前端或 Node.js 程序时，经常需要在循环中注册异步操作或事件监听器。例如，遍历一组列表项绑定点击事件，或者使用定时器 setTimeout 延迟执行任务。当使用 var 关键字声明循环计数器时，很多初学者都会遇到一个反直觉的现象：无论循环执行了多少次，每个内部异步回调打印出的计数器值竟然完全相同，且都等于循环退出时的最大数值。

// 场景示例：使用 var 的循环定时器
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log('当前索引值:', i);
    }, 100);
}

预期输出原本是 0, 1, 2, 3, 4，但实际却输出了 5 次数字 5。如果这发生在 DOM 节点的点击事件绑定中（例如 buttons[i].onclick = function() { alert(i); }），用户点击任何一个按钮，弹出的都会是最大索引值，导致业务逻辑出现严重错误。

二、根源剖析：为什么闭包无法保存当次循环的 i？

要彻底解决该问题，必须先厘清 JavaScript 两个核心机制的交互：变量作用域规则与事件循环（Event Loop）。

1. var 的作用域缺失

在 ECMAScript 5 及更早版本中，JavaScript 仅有全局作用域和函数作用域，不存在块级作用域（Block Scope）。for (...) { ... } 花括号并不会创建新的词法环境。因此，var i = 0 实际上是将变量 i 声明在当前的包含函数（或全局上下文）中。在整个循环生命周期内，内存中只分配了一个名为 i 的存储位置，每次迭代 i++ 都只是覆盖这一处内存数据。

2. 闭包捕获的是“引用”而非“当刻快照”

闭包是指有权访问另一个函数作用域内变量的函数。在代码中，传递给 setTimeout 的匿名函数就是一个闭包。闭包在其内部被定义时，记住了自己的外层作用域链。需要强调的是：闭包并不会在创建时把外部变量的值复制一份存进自身内部，而是保留对该变量内存地址的引用指针。

3. 事件循环导致的“时间差”

setTimeout 是一个异步宏任务。当 JavaScript 引擎执行循环时，它在主线程的调用栈（Call Stack）中同步推进。循环从 i = 0 执行到 i = 4 并最终累加至 i = 5 退出，耗时通常不到 1 毫秒。而 setTimeout 注册的回调函数必须等待计时器到期，并被推入事件循环队列，直到调用栈彻底清空后才被调入执行。当这些回调开始执行并执行 console.log(i) 时，沿作用域链向上查找找到的 i 已经统一变成了 5。

三、解决方案：使用立即执行函数（IIFE）锁定变量

既然 ES5 只有函数作用域能够创建隔离的作用域边界，那么最自然的做法就是在循环体内部声明一个函数，并让其立即执行。这就是立即执行函数表达式（Immediately Invoked Function Expression，简称 IIFE）。

1. 基础改造方案：在循环体内包裹 IIFE

将异步任务包裹在 IIFE 中，并将当前的计数器 i 作为实参传给该函数。IIFE 内部定义形参（例如 index）来接收该值：

// 解决方案一：标准 IIFE 传参锁定变量
for (var i = 0; i < 5; i++) {
    (function(index) {
        setTimeout(function() {
            console.log('当前索引值:', index);
        }, 100);
    })(i); // 将当前的 i 作为实参立即传入
}

在上面的代码中，(function(index) { ... })(i) 在每次循环迭代时都会被立即调用。由于 JavaScript 中基本类型参数采用按值传递（Pass by Value），当前 i 的数值会被完整拷贝给形参 index。这样，每次循环都会创建一个全新的函数执行上下文，每个上下文中的 index 是彼此完全独立且互不干扰的。

2. 变体方案：IIFE 返回函数表达式（高阶函数法）

除了把 setTimeout 整体放进 IIFE 内部，还可以让 IIFE 直接返回真正的处理函数。这种写法常用于事件处理函数的批量挂载：

// 变体写法：IIFE 返回一个全新的闭包函数
for (var i = 0; i < 5; i++) {
    setTimeout(
        (function(index) {
            return function() {
                console.log('返回函数中捕获的索引:', index);
            };
        })(i), 
        100
    );
}

在这个变体中，setTimeout 接收到的第一个参数并不是立即调用的结果，而是 IIFE 执行后返回的那个内层匿名函数。内层函数在定义时就绑定了 IIFE 作用域中的 index，效果与基础方案完全一致。

四、原理解密：执行上下文与活动对象（AO）模型

从底层执行机制来看，为什么 IIFE 能够成功“冻结”住当次循环的变量？

在 ECMAScript 规范中，每次函数调用都会产生一个全新的执行上下文（Execution Context），并建立一个与之关联的活动对象（Activation Object，在现代规范中对应 Lexical Environment Record）。

• 在没有 IIFE 时，整个 for 循环只存在于一个执行上下文（例如全局上下文或外部函数上下文）中，只有一个活动对象，其中保存了 i。所有的 setTimeout 回调的作用域链顶端都指向这同一个活动对象。
• 引入 IIFE 后，循环执行 5 次，就立即调用了 5 次 IIFE 函数。JavaScript 引擎随之创建了 5 个互不相同的 IIFE 执行上下文。
• 在每个上下文的活动对象中，形参 index 都被初始化为传入的当次实参值（分别为 0, 1, 2, 3, 4）。
• 每个内层回调函数的作用域链（Scope Chain）先指向自己所属的那个 IIFE 活动对象，再指向外部环境。当回调执行并寻找 index 时，在第一级作用域链（属于该次回调的 IIFE 作用域）中就成功匹配到了值，无需再向上查询外部的 i。

五、常见错误与注意事项

在使用 IIFE 改造循环闭包的过程中，有几个细节极易被疏忽，需要特别留意：

1. 忘记传递实参或形参未对齐

如果在写 IIFE 时写成 (function() { setTimeout(..., 100); })()，内部没有声明形参或者外部调用没有传入 (i)，那么内部回调依然需要跨越 IIFE 作用域去外层查找 i，隔离机制将彻底失效。

2. 传递引用类型而非原始值

JavaScript 参数传递始终是按值传递。但如果循环处理的是对象（Object 或 Array），传入 IIFE 的是该对象的内存地址引用。如果后续代码修改了该对象内部的属性，闭包中读取到的属性依然会发生改变。针对对象属性变动，需在传入前进行浅拷贝或深拷贝。

3. 与 ES6 语法糖的对比：let 的演进

在现代 JavaScript（ES6+）中，引入了块级作用域关键字 let。如果在 for 循环头部使用 let i = 0，JavaScript 引擎会在底层规范中为每一次迭代自动创建一个新的词法环境（Lexical Environment），其原理与 IIFE 在概念上高度契合，但语法更加精炼：

// 现代 ES6 写法：利用 let 的块级作用域
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 输出 0, 1, 2, 3, 4
    }, 100);
}

尽管 let 已经成为现代开发的首选，但深入理解 IIFE 的解决路径至关重要：

• ES5 兼容性要求：在某些需要兼容老旧浏览器环境、未经过 Babel 转译的遗留系统或嵌入式 JS 引擎中，IIFE 仍是唯一可靠的原生方案。
• 理解底层机制：IIFE 揭示了函数调用栈、执行上下文、参数传递和词法作用域查找的本质，是掌握 JavaScript 语言核心模型的必经之路。

六、全文总结

当在循环中通过闭包捕获外部 var 变量时，错误的根本原因是变量缺少块级隔离以及异步调用的时序延迟。

• 解决本质：使用立即执行函数（IIFE）的本质，是主动借助 JavaScript 的函数级作用域机制，在每次迭代时显式创建一个新的执行上下文。
• 关键操作：在 IIFE 定义形参并把循环计数值作为实参传入，利用参数的按值传递将当刻的数值状态锁定在当次生成的活动对象中。
• 技术演进：现代 JavaScript 中的 let 语法在语言层面上自动化了这一独立词法绑定的建立过程，但 IIFE 所体现的执行上下文和闭包作用域链模型，依然是深入理解 JavaScript 运行原理不可或缺的基石。