深入剖析 JavaScript 循环变量作用域：let 与 var 的差异

在 JavaScript 中，循环和异步操作的结合往往会引发一些微妙的问题，尤其是当我们使用 setTimeout 等异步函数时。本文将深入解析一个常见问题：为什么使用 var 声明变量时，所有回调输出结果相同，而使用 let 声明则能够正确输出预期结果？

---

问题场景

以下是两个代码段：

示例一：使用 let 声明变量

for (let i = 0; i < 10; i++) {
    setTimeout(() => { console.log(i) }, 300); 
}

示例二：使用 var 声明变量

for (var i = 0; i < 10; i++) {
    setTimeout(() => { console.log(i) }, 300); 
}

执行后，结果截然不同：

• let 输出： 0, 1, 2, ..., 9
• var 输出： 全是 10

为什么会有这样的区别？答案就在于 作用域 和 变量绑定 的不同。

---

变量作用域的差异

• let 的作用域：

let 声明的变量具有 块级作用域 ，即每次循环都会创建一个新的变量绑定。在上面的示例中，setTimeout 的回调函数捕获的是当前循环迭代中 i 的值，因此可以正确输出 0, 1, 2, ..., 9。

• var 的作用域：

var 声明的变量具有 函数作用域 （或全局作用域），循环中的 i 是一个共享变量。每次迭代都会修改这个共享变量，导致所有回调函数最终访问到的都是同一个 i，而此时它已经变成了 10。

---

代码执行过程解析

let 的行为

for (let i = 0; i < 10; i++) {
    setTimeout(() => { console.log(i) }, 300);
}

1. let i 的作用范围仅限于当前循环块。
2. 每次循环都会为 i 创建一个独立的新绑定。
3. setTimeout 的回调函数捕获的是当前循环中 i 的值，而非共享变量。
4. 最终输出 0, 1, 2, ..., 9。

var 的行为

for (var i = 0; i < 10; i++) {
    setTimeout(() => { console.log(i) }, 300);
}

1. var i 是函数作用域的共享变量。
2. 每次循环迭代只是对同一个 i 进行赋值。
3. 当 setTimeout 的回调执行时，循环早已结束，i 的值已经被修改为 10。
4. 所有回调都输出 10。

---

闭包与作用域结合的深入理解

闭包 是 JavaScript 的一个重要概念，指的是函数能够"记住"它被创建时的作用域。

在以上代码中，setTimeout 的回调函数形成了闭包，它捕获了变量 i。

• var 的问题 ：闭包捕获的是循环中的共享变量 i。当异步回调执行时，i 已经被修改为最终值 10。
• let 的优势 ：let 创建的变量具有块级作用域，每次循环都有独立的 i，闭包捕获的是对应迭代中的变量绑定。

---

如何修复 var 的问题？

如果必须使用 var，可以通过以下方式实现正确行为：

使用立即执行函数（IIFE）

通过 IIFE（立即执行函数）为每次循环创建独立作用域：

for (var i = 0; i < 10; i++) {
    (function(j) {
        setTimeout(() => { console.log(j) }, 300);
    })(i);
}

• 原理 ：将当前循环的 i 传入 IIFE 中，IIFE 的参数 j 是一个独立的变量。
• 输出结果 ：0, 1, 2, ..., 9

使用 let 替代 var

直接用 let 声明变量，代码更简洁：

for (let i = 0; i < 10; i++) {
    setTimeout(() => { console.log(i) }, 300);
}

---

总结

特性	let	var
作用域	块级作用域	函数/全局作用域
变量绑定	每次循环创建新的绑定	单一共享绑定
输出结果	0, 1, 2, ..., 9	全是 10

在异步回调中，理解 作用域规则 和 闭包行为 是避免陷阱的关键。推荐在现代 JavaScript 中优先使用 let 和 const 声明变量，不仅可以避免 var 的作用域问题，还能提高代码的可读性和可靠性。