JavaScript 闭包经典问题：为什么输出 10 次 i=10

javascript 体验AI代码助手 代码解读复制代码function f() {
    for(var i = 0; i < 10; i++) {
        setTimeout(() => {
            console.log('i=', i)
        });
    }
}

f();

ini 体验AI代码助手 代码解读复制代码i= 10
i= 10
i= 10
...（共 10 次）

css 体验AI代码助手 代码解读复制代码for(var i = 0; i < 10; i())
    ↑
    └── var 声明的变量是函数作用域
        整个函数 f 内都能访问这个 i

markdown 体验AI代码助手 代码解读复制代码循环次数     i 的值    循环条件 (i < 10)
---------------------------------------
第 1 次      0         ✓ 通过
第 2 次      1         ✓ 通过
...
第 10 次     9         ✓ 通过
             10        ✗ 不通过，循环结束

循环结束后：i = 10

css 体验AI代码助手 代码解读复制代码for(var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log('i=', i)  // ← 所有回调共享同一个 i
    });
}

css 体验AI代码助手 代码解读复制代码时间轴：
─────────────────────────────────────────
| 同步执行阶段        | 异步执行阶段        |
─────────────────────────────────────────
for 循环完成      setTimeout 回调执行
i 递增到 10       读取 i 的值（此时 i=10）
                  输出 10 次 i=10
─────────────────────────────────────────

less 体验AI代码助手 代码解读复制代码变量 i 的生命周期：
─────────────────────────────→ 时间
     0 1 2 3 4 5 6 7 8 9  10
     └───┬───┘ └───┬───┘
         │                │
     同步循环执行        循环结束
                        i=10

回调函数 1:  ────────────────────→ 读取 i (10)
回调函数 2:  ────────────────────→ 读取 i (10)
...
回调函数 10: ────────────────────→ 读取 i (10)

javascript 体验AI代码助手 代码解读复制代码function f() {
    for(let i = 0; i < 10; i++) {
        setTimeout(() => {
            console.log('i=', i)
        });
    }
}

javascript 体验AI代码助手 代码解读复制代码function f() {
    for(var i = 0; i < 10; i++) {
        (function(j) {
            setTimeout(() => {
                console.log('i=', j)
            });
        })(i);
    }
}

javascript 体验AI代码助手 代码解读复制代码function f() {
    for(var i = 0; i < 10; i++) {
        setTimeout((j) => {
            console.log('i=', j)
        }, 0, i);
    }
}