如何正确理解闭包中的变量作用域？

Question

在JavaScript中，闭包常被误解为“捕获变量的值”，但实际上它捕获的是**变量的引用**而非值。一个典型问题是：在循环中创建多个函数并返回，期望每个函数保留对应的索引值，但最终所有函数都共享最后一个索引。例如，`for(var i = 0; i < 3; i++) { arr.push(() => console.log(i)); }` 调用时均输出3。这源于闭包绑定的是变量`i`本身，而`var`声明提升导致所有函数共享同一作用域中的`i`。如何正确理解并解决这一现象？关键在于掌握闭包的作用域链机制及ES6中`let`块级作用域或立即执行函数（IIFE）的应用。

Answer 1

1. 闭包的本质：变量引用而非值的捕获

在JavaScript中，闭包（Closure）是指函数能够访问其词法作用域中的变量，即使该函数在其原始作用域之外执行。一个常见的误解是认为闭包“捕获的是变量的值”，但事实上，它捕获的是变量的引用。

let arr = [];
for (var i = 0; i < 3; i++) {
  arr.push(() => console.log(i));
}
arr[0](); // 输出: 3
arr[1](); // 输出: 3
arr[2](); // 输出: 3

上述代码中，期望输出为0、1、2，但实际上全部输出3。原因在于：var声明的变量i具有函数作用域，并且存在变量提升，导致循环结束后i的最终值为3；而每个箭头函数都通过闭包引用了同一个变量i，因此它们共享该变量的最终状态。

2. 深入分析：作用域链与执行上下文

要理解这一现象，必须掌握JavaScript的作用域链机制和执行上下文模型。当函数被定义时，它会创建一个内部[[Environment]]引用，指向定义时的词法环境。这个机制构成了闭包的基础。

阶段	变量i状态	函数创建情况	闭包引用对象
第1次循环	i = 0	创建函数F0	引用全局i
第2次循环	i = 1	创建函数F1	引用全局i
第3次循环	i = 2	创建函数F2	引用全局i
循环结束	i = 3	循环终止	所有函数引用i=3

由于var不具备块级作用域，所有函数都在同一作用域中定义，共享同一个i变量。

3. 解决方案一：使用IIFE创建独立作用域

立即执行函数表达式（IIFE）可以手动创建一个新的作用域，从而隔离每次循环中的变量值。

let arr = [];
for (var i = 0; i < 3; i++) {
  arr.push(
    (function (index) {
      return function () {
        console.log(index);
      };
    })(i)
  );
}
arr[0](); // 输出: 0
arr[1](); // 输出: 1
arr[2](); // 输出: 2

这里，IIFE将当前的i作为参数传入，形成局部副本index，每个闭包绑定的是不同的参数变量，从而避免共享问题。

4. 解决方案二：使用ES6的let关键字

ES6引入了let和const，提供真正的块级作用域。在for循环中使用let声明变量，会在每一次迭代中创建一个新的词法环境。

let arr = [];
for (let i = 0; i < 3; i++) {
  arr.push(() => console.log(i));
}
arr[0](); // 输出: 0
arr[1](); // 输出: 1
arr[2](); // 输出: 2

graph TD
    A[开始循环] --> B{i < 3?}
    B -- 是 --> C[创建新词法环境]
    C --> D[定义i并初始化]
    D --> E[创建函数并闭包引用当前i]
    E --> F[执行i++]
    F --> B
    B -- 否 --> G[循环结束]

每次迭代都会生成一个新的i绑定，使得每个闭包引用的是各自迭代中的变量实例，而非共享同一个引用。

5. 高阶应用：闭包在实际工程中的影响

这类问题不仅出现在教学示例中，在真实项目中也频繁出现，例如事件处理器绑定、定时器回调、异步任务队列等场景。

• 事件监听器动态绑定索引
• setTimeout中使用循环变量
• React中useCallback与依赖数组管理
• 模块模式中私有变量的封装
• 函数工厂返回定制化处理函数
• 高阶组件中的props注入逻辑
• Promises链式调用中的上下文保持
• AJAX回调中对外部变量的引用
• 防抖/节流函数对上下文的捕获
• 观察者模式中订阅函数的状态保存

理解闭包对变量的引用机制，有助于规避内存泄漏、状态错乱等问题，提升代码健壮性。