JS闭包经典面试题：循环中setTimeout变量捕获陷阱解析

题头概览：JS 异步循环中执行栈清空、任务队列就绪与共享变量捕获模型

一、现象复现：为什么没有按顺序输出 0 到 4？

在讨论原理前，先看这段无论在前端面试题库还是在实际项目中都经常引起混淆的经典代码：

// 经典面试题代码示例
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

// 实际控制台输出（等待 1 秒后几乎同时打印）：
// 5
// 5
// 5
// 5
// 5

初学者容易产生两类认知偏差：

• 时序误区：误认为 setTimeout 具有阻塞性，以为循环会“每等 1 秒输出一个数字”；实际上 JavaScript 是单线程非阻塞模型，5 次循环迭代在几毫秒内便已瞬间执行完毕。
• 传值误区：误认为把包含 console.log(i) 的函数传入 setTimeout 时，JavaScript 会自动“记录并冻结当前 i 的瞬时数值”。然而，闭包捕获的是变量的引用（指针），而非变量在传入瞬间的快照拷贝。

二、全链路时序剖析：调用栈、Web APIs 与事件循环

要透彻理解连续输出 5 的原因，必须结合 JavaScript 运行时的三个核心构件：Call Stack（调用栈）、Web APIs（宿主定时器线程）和 Task Queue（宏任务队列）。

图1：循环中 setTimeout 的调用栈、Web APIs 与任务队列时序推导过程

整个代码的实际执行生命周期可分为以下三个离散阶段：

1. 同步循环阶段（t = 0ms）

全局执行上下文压入调用栈。当进入 for 循环时，每次迭代同步调用 setTimeout 函数。setTimeout 是由浏览器宿主或 Node.js 环境提供的异步计时 API，它的工作只是“在宿主环境注册一个计时器并指定回调”，该注册动作本身是纯同步的，注册完毕后 setTimeout 立即出栈。

5 次循环迭代在极短时间内（通常小于 1 毫秒）执行完毕。循环终止的条件是 i < 5 不再满足，此时 i 的数值刚好是 5。随后，主线程调用栈清空，处于空闲（Idle）等待状态。

2. 宿主计时阶段（t: 0ms ~ 1000ms）

5 个定时器在 Web APIs 的后台计时模块中并行倒计时 1000 毫秒。由于 5 次循环注册的时差在毫秒级内微乎其微，1000 毫秒后，5 个计时器几乎在同一时刻满足到期触发条件，对应的 5 个回调函数被依次推入宏任务队列（Macrotask Queue）中等待执行。

3. 事件循环调度与回调执行（t > 1000ms）

事件循环（Event Loop）检测到调用栈为空，便从宏任务队列首部依次取出回调函数压入调用栈执行。此时每个回调函数开始执行 console.log(i)。当它需要读取变量 i 时，当前函数的局部作用域中并没有定义 i，解释器只得沿着作用域链向上查找——而在全局执行上下文中，唯一的那个 i 已经在 1 秒前的同步循环中停留在数值 5。因此，5 个回调函数读取到的全都是 5。

三、核心陷阱根源：作用域链与内存模型架构

这个陷阱的根源是 JavaScript 作用域规则与闭包底层机制的交互。在 ES6 引入块级作用域之前，变量声明只有全局作用域与函数作用域之分。

图2：var 全局单引用与闭包独立词法作用域内存模型对比

如上图所示，当使用 var i = 0 时：

• 变量 i 被提升并登记在全局执行上下文的变量环境（Variable Environment）中，整个内存中只存在这一个变量 i 的存储槽位。
• for 循环的代码块花括号 { } 对 var 起不到任何作用域隔离效果。
• 传递给 setTimeout 的 5 个匿名回调函数都是闭包（Closure），它们的内部隐藏属性 [[Scopes]] 都保存了对全局词法环境的引用。
• 闭包并不复制变量值，而是持有变量所在词法环境的动态引用指针。当指针指向的同一个内存单元被修改为 5 时，所有回调函数无论何时执行，解引用读取到的都是同一个最终值。

四、四种工程级破局方案全面解析

要打破这个陷阱，核心逻辑非常明确：切断对单一可变全局变量的共享引用，在每次迭代时生成独立的词法作用域或数值快照。根据工程历史与项目需求，有以下四种实用实现方案：

图3：四种破局方案执行流与参数传递路径全解

方案 1：利用 ES6 块级作用域（let 声明，首选推荐）

现代前端工程最简明、优雅且标准化的解法，是将 var 直接替换为 let：

// 方案1：ES6 let 声明
for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

// 控制台输出（1 秒后几乎同时按顺序打印）：
// 0
// 1
// 2
// 3
// 4

底层机制解析：ECMAScript 规范对 for (let ...) 做了专门的设计——每次迭代并不复用同一个变量环境，而是为循环体隐式创建全新的词法环境（Lexical Environment），并将上一次迭代的值作为初始值复制给当前迭代的新变量 i。因此，5 个回调函数的 [[Scopes]] 分别绑定了 5 个互相隔离的词法作用域，每个作用域内的 i 都是独立的不可变常量（分别为 0, 1, 2, 3, 4）。

方案 2：立即执行函数表达式（IIFE，ES5 经典闭包解法）

在没有 let 的 ES5 环境或需要深入考察原生闭包构造的面试中，标准答案是使用 IIFE 显式构造函数级私有作用域：

// 方案2：IIFE 显式作用域隔离
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}

底层机制解析：JavaScript 的函数调用采用按值传递（Pass by Value）。在每次循环中，立即调用外部匿名函数并将当前 i 传入。形参 j 是该函数调用栈帧中的局部变量。当外部函数执行完毕后，由于内部 setTimeout 回调引用了 j，该私有词法环境不会被垃圾回收回收，从而将 0、1、2、3、4 分别固化在 5 个独立的函数作用域中。

方案 3：利用 setTimeout 的附加参数（零额外闭包）

许多开发者忽略了 setTimeout 原生 API 的传参功能：

// 方案3：利用 setTimeout 第三个及之后的参数
for (var i = 0; i < 5; i++) {
  setTimeout(function(j) {
    console.log(j);
  }, 1000, i); // 将当前 i 作为参数显式传入
}

底层机制解析：setTimeout 的语法定义为 setTimeout(function, delay, param1, param2, ...)。在循环执行时，第三个参数 i 是按值求值的，宿主环境在登记定时器时，会将当前的 i 数值（0 到 4）作为入参持久化在底层定时器任务结构体中。当定时器触发并将回调入栈时，宿主环境主动将该数值作为实参传入回调的形参 j。该方案无需创建任何额外的包装闭包，执行效率与内存表现均非常出色。

方案 4：使用 Function.prototype.bind 预置参数

利用函数式编程中的偏函数（Partial Application）柯里化思想，通过 bind 冻结参数：

// 方案4：Function.prototype.bind 柯里化
for (var i = 0; i < 5; i++) {
  setTimeout(console.log.bind(console, i), 1000);
}

底层机制解析：bind(thisArg, ...argArray) 会立即返回一个新的绑定函数（Bound Function）。在循环迭代时，bind(console, i) 将当前的数值 i 固化到了新函数的内部私有槽位 [[BoundArguments]] 中。当 1 秒后回调被调用时，预置的 i 会优先作为实参注入执行。

五、进阶变体场景：实现“每隔一秒顺序输出一个数字”

面试官在考生答出上述四种方案后，经常会追加一个变体问题：“如果要求不是等待 1 秒后同时打印 0, 1, 2, 3, 4，而是严格每隔 1 秒依次输出一个数字（0 到 4 历时 5 秒完成），应该怎么写？”

变体 1：动态调整延迟时间倍数（并发分时）

最直接的做法是让每个定时器的延迟时间递增：

// 延迟时间递增：1000ms, 2000ms, 3000ms, 4000ms, 5000ms
for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, (i + 1) * 1000);
}

变体 2：现代 Promise 与 async/await（严格串行）

工程中更健壮的做法是使用 async/await 配合 Promise 睡眠工具函数，将并发任务改造为严格串行等待：

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

async function runSequential() {
  for (let i = 0; i < 5; i++) {
    await sleep(1000); // 真正阻塞当前 async 函数的执行流程
    console.log(i);
  }
}

runSequential();

此方案通过 Promise 微任务/状态推进机制，在每个循环步骤间显式挂起当前协程，是现代异步流程控制的黄金规范。

六、总结与工程选型决策

在不同工程阶段与架构约束下，针对循环异步变量捕获问题，应采用针对性的选型逻辑：

图4：循环异步变量捕获排查与技术选型决策拓扑图

最终总结判断：

“循环中 setTimeout 变量捕获陷阱”是理解 JavaScript 语言底层特性的试金石。它串联了词法作用域、闭包的引用语义与事件循环的异步调度机制。在实际业务开发中，应无条件坚持使用 let/const 避免变量提升和全局污染；而对该题目深层原理的透彻理解，则是排查复杂异步竞态条件、优化内存生命周期的基础功底。