javascript闭包与settimeout函数：理解undefined输出及解决方案

在JavaScript中，正确理解闭包和变量作用域是编写高效代码的关键。本文分析一个常见问题：为什么使用setTimeout函数和for循环时，会输出五个undefined，以及如何解决这个问题。

问题描述： 下面的代码片段为何输出五个undefined？

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

问题解答：

这段代码中，setTimeout函数内部的匿名函数创建了一个闭包。闭包允许内部函数访问外部函数的变量。然而，setTimeout函数是异步执行的。当for循环结束后，变量i的值已经变为5。由于匿名函数并非立即执行，而是延迟执行，它访问到的i是循环结束后i的最终值，即5。

立即学习“Java免费学习笔记（深入）”；

要解决这个问题，我们需要确保匿名函数能够访问for循环中每次迭代的i值。 有两种主要方法：

方法一：使用setTimeout的第三个参数

我们可以利用setTimeout函数的第三个参数，显式地传入i值：

function fetch() {
    for (var i = 0; i < 5; i++) {
        setTimeout(function(j) { // 使用j作为参数
            console.log(j);
        }, 0, i); // 将i作为第三个参数传入
    }
}
fetch();

通过将i作为第三个参数传入setTimeout，匿名函数在执行时就能访问到正确的i值，避免了闭包导致的作用域问题。 此修改后的代码将依次输出 0, 1, 2, 3, 4。

方法二：使用let关键字

let关键字声明的变量具有块级作用域。使用let声明循环变量，每次循环都会创建一个新的i变量：

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

let的块级作用域避免了闭包问题，每个setTimeout回调函数都将访问到它自身迭代时i的快照值。 此代码同样会正确输出 0, 1, 2, 3, 4。

这两种方法都能有效解决setTimeout和for循环结合时出现的undefined输出问题。 选择哪种方法取决于个人偏好和代码风格，但理解其背后的闭包和作用域机制是至关重要的。