JS闭包经典面试题解析：循环中setTimeout为何输出相同值

一、现象直击：一段经典的“反直觉”代码

我们先来看这段几乎每一位前端开发者都见过的经典代码片段。直觉上，开发者初次接触它时，往往以为控制台会在 1 秒后依次打印出 0, 1, 2, 3, 4：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

然而在浏览器或 Node.js 环境中实际运行这段代码，等待约 1 秒后，控制台会几乎在同一瞬间连续打印出 5 次数字：

// 控制台实际输出：
5
5
5
5
5

初学者通常会产生两个直观的误解：第一，误以为循环里的 setTimeout 会让 JavaScript 主线程“暂停等待 1 秒”再进入下一轮循环；第二，误以为每次执行 setTimeout 传入的回调函数，会自动将当次循环中 i 的数值静态“拍照保存”起来。

要打破这两个直觉误区，我们必须拆解出其背后运作的两个核心支柱：**异步非阻塞的执行时序**，以及**基于词法作用域链的闭包引用模型**。

二、核心机制一：事件循环与异步执行时序

JavaScript 是一门单线程、非阻塞的脚本语言。主线程的调用栈（Call Stack）在处理代码时，遵循“同步代码优先执行，异步任务挂起调度”的严格原则。

在上述代码中，整个 for 循环体属于**同步执行代码**，而 setTimeout 的回调函数属于**异步宏任务（Macrotask）**。它们的具体执行流如下：

1. 主线程极速跑完循环：循环从 i = 0 开始，每次调用 setTimeout。调用 setTimeout 本身是同步的，但它做的事情仅仅是向浏览器的定时器模块（Web APIs）登记一个 1000ms 的计时器，并不会阻塞调用栈。现代计算机执行 5 次简单的数学自增和函数注册，耗时通常不足 0.1 毫秒。
2. 循环终止条件达成：当 i 自增至 5 时，条件表达式 i < 5 判定为 false，循环立即终止，主线程同步调用栈清空。此时，外部环境中的 i 已经固定为 5。
3. 倒计时与队列排队：在后台并发计时的 5 个定时器，在约 1000ms 后相继计时完成，浏览器的 Web APIs 模块依次将它们的回调函数推入**宏任务队列（Macrotask Queue）**。
4. 事件循环取出并执行：事件循环（Event Loop）监测到主线程调用栈已空闲，便从宏任务队列中依次提取这 5 个回调函数压入调用栈执行 console.log(i)。

三、核心机制二：作用域链与闭包的引用特性

时序差异解释了“为什么回调函数会在循环完全结束之后才执行”，但为什么每个回调拿到的都是 5，而不是自己在被注册时那个时刻的 0, 1, 2, 3, 4 呢？这涉及到 JavaScript 变量声明的作用域与闭包特质。

1. var 的作用域缺失与单一内存槽位

在 ES6 之前，JavaScript 只有**全局作用域**和**函数作用域**，不存在**块级作用域**。使用 var i = 0 声明的变量 i 会被提升至当前包裹它的函数（或全局）作用域中。

尽管代码书写在花括号 { ... } 内部，但引擎在内存中**仅分配了一个名为 i 的存储槽位（Variable Slot）**。每一次循环迭代所执行的 i++，都是对这同一个内存槽位进行覆盖写入。

2. 闭包保存的是“变量引用”而非“数值快照”

在 JavaScript 中，函数在定义时会静态记录其外层的词法作用域链。5 个匿名回调函数在内部使用了自身未声明的标识符 i，因此它们都成为了闭包。

关键在于：**闭包所捕获的是外部词法环境中的变量引用（内存地址指针），而不是函数定义瞬间那个基本类型值的静态拷贝（Snapshot）**。

当 1 秒后回调函数被事件循环唤醒并执行 console.log(i) 时，引擎在当前函数作用域找不到 i，随即顺着作用域链向上寻找，访问了外层作用域中的 i。此时由于同步循环早已结束，该内存槽位里的值早已是 5。因此，5 个回调函数先后读取到的全都是同一个变量引用的最新结果——5。

四、解决方案：三种阻断共享引用的实用解法

搞清楚了“异步时序滞后”与“作用域单槽引用”这两个关键成因，解决这一问题的思路便非常明确：**要么在每次循环迭代时为回调函数提供一个独立、私有的作用域；要么在定时器登记的瞬间将当时的数值固化传递给回调**。

方案一：使用 ES6 块级作用域关键字 let（现代标准解法）

将 var 直接替换为 let，是现代 JavaScript 开发中最直接、最优雅的做法：

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 约 1 秒后依次输出: 0, 1, 2, 3, 4

底层运作原理：根据 ECMAScript 规范，for 循环头部如果使用 let 声明计数器，JavaScript 引擎会在**每次循环迭代时隐式创建一个全新的块级词法环境（Lexical Environment）**。

在进入下一轮迭代前，引擎会将当前轮次计算出的 i 值作为初始值绑定到下一轮新创建的环境中。因此，在 5 次迭代中，实际上存在 5 个独立的变量 i。每个定时器回调函数各自捕获了所属迭代轮次对应的私有 i 变量引用，彼此互不干扰，成功按预期输出 0, 1, 2, 3, 4。

方案二：利用立即执行函数表达式（IIFE）创建私有作用域（ES5 兼容解法）

在不支持 ES6 的遗留旧环境或面试明确限定仅使用 ES5 语法时，可以通过立即执行函数表达式（Immediately Invoked Function Expression, IIFE）来手动制造函数作用域：

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}
// 约 1 秒后依次输出: 0, 1, 2, 3, 4

底层运作原理：JavaScript 中的函数实参传递遵循**值传递（Pass by value）**原则。在每次循环同步执行时，立即调用匿名函数并将当次 i 的瞬时值传入形参 j。

由于函数执行会创建独立的执行上下文，每次调用产生的形参 j 都是专属且私有的局部变量。定时器回调函数引用的不再是外层不断自增的 i，而是当前 IIFE 内部被锁定的局部形参 j，从而成功保存了当次状态。

方案三：利用 setTimeout 的附加参数特性（原生 API 解法）

许多开发者往往忽略了 setTimeout 原生 API 自身具备的传参功能。根据规范，setTimeout 允许传入第三个及更多参数，这些参数会在计时结束回调执行时，原样作为实参传递给回调函数：

for (var i = 0; i < 5; i++) {
  setTimeout(function(val) {
    console.log(val);
  }, 1000, i); // 注意此处的第 3 个参数 i
}
// 约 1 秒后依次输出: 0, 1, 2, 3, 4

底层运作原理：第三个参数 i 位于 setTimeout 调用的参数求值阶段，属于**同步代码求值**。每次循环推进时，当前的 i 值被作为常规参数立即求值并存储在宿主环境所创建的定时器结构体中。

当 1 秒后定时器触发时，宿主环境会自动把之前预存的数值作为参数注入回调函数。这种方式既不需要闭包嵌套，也不需要修改外部变量作用域，代码结构扁平简洁。

五、方案横向对比与技术选型

为了让大家在实际开发与技术决策中有更清晰的参照，下表对上述方案及衍生函数式解法进行了综合横向对比：

六、高频面试延伸题：如何实现“每隔一秒依次输出”？

在高级前端面试中，面试官往往不会止步于让你把输出改为 0, 1, 2, 3, 4，而是会紧接着追问：**“上面的代码在 1 秒后是几乎同时把 0 到 4 打印出来的。如果要求每隔 1 秒依次输出一个数字，代码应该如何调整？”**

要实现真正的“间隔输出”，本质上是要控制异步任务之间的执行间隔。主要有两种实用思路：

思路 1：乘法线性递增延时时间（基于 setTimeout 算术延时）

每个定时器的执行起点都是当前同步瞬间，若想形成间隔阶梯，只需将每个回调的延迟时间设置为 i * 1000：

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}
// 第 0 秒输出 0，第 1 秒输出 1，第 2 秒输出 2... 依次间隔 1 秒

思路 2：使用 Promise 与 async/await（现代流式串行控制）

利用 Promise 封装延时器，结合 await 在循环中主动阻塞后续代码的推进，实现真正的串行控制流：

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function runInSequence() {
  for (let i = 0; i < 5; i++) {
    await sleep(1000);
    console.log(i);
  }
}

runInSequence();
// 启动后等待 1 秒输出 0，再等待 1 秒输出 1... 真正按序步进

七、总结与开发避坑指南

for 循环中 setTimeout 输出相同值的经典试题，看似只是 5 行简短代码，实则涵盖了 JavaScript 语言最核心的几大支柱概念：**单线程模型、执行栈与任务队列、变量声明的作用域范围、以及闭包对外部状态的引用机制**。

在实际工程开发中，为彻底避免类似的异步状态捕获陷阱，建议遵循以下两条实践准则：

• 全盘弃用 var：在任何现代 JavaScript 或 TypeScript 项目中，开启严格的代码检查（如 ESLint 的 no-var 规则），全面使用 let 与 const，从根源上杜绝变量提升与作用域污染。
• 警惕异步回调对外部可变状态的引用：当异步操作（定时器、事件监听器、网络请求、Promise 等）需要依赖循环或上下文中的数据时，优先通过参数传递、对象解构或不可变数据进行显式传递，避免依赖隐式闭包去读取随时可能发生变更的外部共享变量。