JavaScript 没有块级作用域：经典闭包陷阱与解决方案

为什么 JS 中 for 循环内的变量会“泄露”？

许多开发者初学时会遇到一个经典问题：在一个 for 循环中将函数赋值给数组元素，循环结束后调用这些函数，期望输出当前的索引值，结果却总是得到最后的循环终止值。

var a = []
for(var i = 0; i < 10; i++){
 a[i] = function(){
 console.log(i);
 }
}
a[6](); // 输出 10，而不是预期的 6

很多人直觉认为结果应该是 6，但实际答案是 10。无论是 a[7]() 还是 a[9]()，结果无一例外都是 10。要理解这一点，必须从 JavaScript 的作用域链机制入手。

核心原因：JavaScript 缺乏块级作用域

ES5 标准（也是目前广泛运行的基础版本）规定：JavaScript 只有全局作用域和函数作用域，没有块级作用域。

这意味着，虽然我们在语法上使用了 {} 包裹代码块（如 for 循环的大括号），但这些大括号并不能形成一个独立的变量作用域。在块内部用 var 声明的变量，实际上是在当前所在的函数作用域或全局作用域中声明的。

第1步：验证变量泄露现象

我们可以通过以下简单代码观察到 var 声明的变量并未被限制在 for 循环内部：

for(var i = 0; i < 10; i++){
 console.log(i); // 正常输出 0-9
}
console.log(i);      // 输出 10
console.log(window.i); // 输出 10 (Node环境中为 global.i)

可以看出，变量 i 虽然定义在 for 循环体内，但它实际上归属于全局对象 window（或 Node.js 的 global）。循环结束后，i 的值保持为 10。

第2步：分析作用域链查找过程

回到最初的数组函数案例。当执行 a[6]() 时：

1. 函数 a[6] 内部并没有定义局部变量 i。
2. 引擎沿着作用域链向上查找，找到了外层（全局）作用域中的 i。
3. 此时循环早已结束，全局变量 i 的最终值为 10。
4. 因此，所有数组中的函数在运行时的打印结果都是 10。

我们需要的是在每次循环迭代时，将当时的 i 值“固定”下来，供对应的函数引用，而不是让所有函数都引用同一个不断变化的全局变量。

解决方案一：使用立即执行函数（IIFE）隔离作用域

在 ES6 引入 let 之前，开发者通常利用 JavaScript 特有的 函数作用域 来模拟块级作用域。通过创建一个立即执行函数（IIFE），可以将每次循环的变量值传递进去，从而形成独立的作用域闭包。

第1步：构建 IIFE 封装结构

在 for 循环体内，使用一个匿名函数包裹业务逻辑，并将循环变量 i 作为参数传入：

var a = [];
for(var i = 0; i < 10; i++){
 (function(i){  // 形参 i 遮蔽了外层的变量 i
   a[i] = function(){
     console.log(i); // 引用的是 IIFE 内部的 i
   };
 })(i); // 实参 i 传入当前循环的值
}

这里发生了一个关键变化：IIFE 内部有一个独立的参数 i。每当循环迭代一次，当前时刻的 i 值就被复制一份传入 IIFE。这个副本存在于 IIFE 的局部作用域中，不会被后续的循环覆盖。

第2步：验证执行结果

现在执行 a[6]() 时，函数会在自己的作用域内找不到 i，进而沿作用域链查找至 IIFE 的作用域，找到那个被保存下来的值 6。同理，其他索引也能正确输出各自的值。

解决方案二：ES6 使用 let 声明（推荐）

现代 JavaScript 开发中，直接使用 let 替代 var 是更简洁、更标准的做法。let 引入了真正的块级作用域。

// ES6 代码
var a = []
for(let i = 0; i < 10; i++){
 a[i] = function(){
   console.log(i);
 }
}
a[6](); // 输出 6

如果使用 Babel 等工具将上述 ES6 代码编译为 ES5，你会发现编译器生成的代码结构与“IIFE 方案”惊人地相似：

// Babel 编译后的等效 ES5 代码
"use strict";
var a = [];
var _loop = function _loop(i) {  // 相当于 IIFE 的逻辑被提取成了函数
  a[i] = function () {
    console.log(i);
  };
};
for (var i = 0; i < 10; i++) {
 _loop(i); // 每次循环都调用该函数，绑定当前 i
}
a[6]();

这表明，无论是手动使用 IIFE 还是使用现代的 let，其底层原理都是为了让每次循环的变量拥有独立的存储空间，从而切断共享作用域导致的引用污染。

总结

理解 JavaScript 的作用域机制对于编写健壮的前端代码至关重要。由于历史原因，var 不具备块级作用域，容易导致变量提升和作用域混淆。在实际开发中，应优先采用 ES6+ 的 let 和 const 来处理循环变量，若需兼容旧环境，则可通过立即执行函数（IIFE）手动隔离变量作用域。

以上就是JavaScript 没有块级作用域的经典案例分析与解决方案的全部内容，更多关于JavaScript高级特性的资料请关注本站其它相关文章！