本文详解 var 与 let 在 for 循环中声明变量时对闭包行为的根本性影响，揭示为何仅将 var i 改为 let i 即可修复“所有函数返回相同值”的经典陷阱，并从作用域绑定、内存模型和规范语义三层面给出专业级解释。
本文详解 `var` 与 `let` 在 for 循环中声明变量时对闭包行为的根本性影响，揭示为何仅将 `var i` 改为 `let i` 即可修复“所有函数返回相同值”的经典陷阱，并从作用域绑定、内存模型和规范语义三层面给出专业级解释。
在 JavaScript 开发中，一个高频且易错的陷阱是：在循环中创建闭包时，所有闭包意外共享同一个外部变量。典型案例如下：
function constfuncs() {
let funcs = [];
for (var i = 0; i < 10; i++) {
funcs[i] = () => i;
}
return funcs;
}
const funcs = constfuncs();
console.log(funcs[5]()); // 输出 10，而非预期的 5该问题的根源不在于“变量未被复制”，而在于变量绑定（binding）的生命周期与作用域边界如何被 JavaScript 引擎定义与实现。下面我们将层层展开。
? 核心机制：let 在 for 循环中具有“每次迭代独立绑定”语义
ECMAScript 规范明确指出：当使用 let（或 const）在 for 语句的初始化子句中声明变量（如 for (let i = 0; ...)）时，该变量并非在整个循环体外声明一次，而是在每次迭代开始时，隐式地在本次迭代的作用域内重新声明并初始化。这被称为 per-iteration binding（每次迭代绑定）。
这意味着：
✅ 每次循环迭代都拥有自己独立的 i 绑定（即逻辑上不同的变量实体）；
✅ 每个箭头函数 () => i 捕获的是当前迭代所对应的那个 i 的绑定，而非全局唯一的 i；
❌ 而 var i 始终只创建一个函数作用域内的绑定，所有迭代共用同一内存位置（尽管值随循环更新）。
可通过等效重构直观验证这一机制：
立即学习“Java免费学习笔记（深入）”；
// ✅ 等价于 `for (let i = 0; i < 10; i++) { ... }`
function constfuncs() {
let funcs = [];
{
let i = 0;
funcs[i] = () => i;
}
{
let i = 1;
funcs[i] = () => i;
}
// ……（共 10 个独立块）
return funcs;
}这种“块级隔离 + 每次迭代新建绑定”的设计，正是 let 解决闭包陷阱的底层依据。
? 内存与闭包：不是“拷贝值”，而是“捕获绑定”
需要澄清一个常见误解：闭包并未将变量的值从栈复制到堆，也不复制变量本身。JavaScript 引擎（如 V8）采用基于 lexical environment records 的环境记录模型。当函数被定义时，它会持有对其词法作用域链中 environment record 的引用。对于 let i，每次迭代都会创建一个新的 declarative environment record，其中包含专属的 i 条目——这个条目在内存中是独立分配的（通常位于堆上），且生命周期延长至所有依赖它的闭包存活为止。
因此：
- var i → 单一 environment record 条目，值持续覆盖 → 所有闭包引用同一地址 → 最终都读到 10；
- let i → 每次迭代生成新 environment record，含独立 i 条目 → 每个闭包捕获不同地址 → funcs[5]() 读取第 6 次迭代创建的 i（值为 5）。
? 注意：这不是“JS 自动深拷贝变量”，而是规范强制要求的绑定隔离行为。即使你从未创建闭包，let i 在循环中依然会为每次迭代建立独立绑定（只是若无闭包引用，该绑定会在迭代结束后被垃圾回收）。
⚠️ 关键注意事项与反模式
-
let 的“魔法”仅适用于 for(;;) 初始化子句
若将 let i 提前到循环外声明，则失去每次迭代绑定特性：function badExample() { let funcs = [], i; for (i = 0; i < 10; i++) { // ❌ 仍是单个绑定！ funcs[i] = () => i; } return funcs; } -
var + 内部 let 是可靠备选方案
显式在循环体内声明新变量，语义清晰且兼容性更好：for (var i = 0; i < 10; i++) { let current = i; // ✅ 每次迭代新建绑定 funcs[i] = () => current; } -
const 同样适用，但需配合 let 计数器
for (const i = 0; i < 10; i++) 语法错误（const 不可递增），但可用于固定值场景：for (let i = 0; i < 10; i++) { const value = i; // ✅ 安全且语义明确 funcs[i] = () => value; }
✅ 总结：三句话掌握本质
- 作用域决定绑定数量：var 创建函数作用域绑定（1 个），let 在 for 初始化中创建每次迭代绑定（N 个）；
- 闭包捕获的是绑定，不是值：每个闭包持有一个指向其对应 i 环境记录条目的引用；
- 修复只需一行：将 var i 替换为 let i，即可让引擎自动为每次迭代生成独立绑定，无需手动引入中间变量。
理解这一机制，不仅解决了循环闭包的经典难题，更深化了对 JavaScript 词法环境、作用域生命周期及现代声明语法设计哲学的认知——它不是语法糖，而是精准控制变量可见性与生命周期的工程实践。
