一道JS前端闭包面试题解析

下面我来为你讲解一道 JS 前端闭包面试题的完整攻略。

面试题

下面是面试题的题目与内容：

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

要求输出 0, 1, 2, 3, 4，但是实际上却是输出了 5, 5, 5, 5, 5。请问这是为什么？如何解决这个问题？

攻略

问题的原因

首先，这个问题的原因是因为 setTimeout 函数是异步执行的，也就是说，当它被调用时，会在执行堆栈中注册一个任务，但是不会马上执行。等到当前任务执行完成之后，才会去执行相应的任务。所以在上面的示例中，五个 setTimeout 都被提交到了执行堆栈中，但是它们都是在同一个作用域里面的，也就是说它们共用了同一个变量 i。

当执行完毕 for 循环后，i 的值变成了 5。然后，在执行异步任务的时候，它们都读取了作用域中的 i，而此时 i 的值已经变成了 5。所以最终输出的结果都是 5。

解决方案

为了避免上述问题，我们可以使用 JavaScript 中的闭包来解决。闭包是指有权访问另一个函数作用域中变量的函数。在上述示例中，我们可以将 setTimeout 中的函数改为一个闭包，将 i 的值传递给闭包，以此保存 i 的值，避免它们共用同一个变量。代码示例如下所示：

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

在这个示例中，我们使用了一个立即执行的匿名函数来创建了一个新的作用域，其中 j 的值会被赋值为 i 的值，然后将它作为参数传递给了闭包函数。这样就可以每次循环都创建一个新的作用域，避免 i 变量的共用，输出结果就会变成 0, 1, 2, 3, 4。

示例解析

下面再给两个示例来加深一下大家的理解。

示例一

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

这个示例中，每次循环的时候，setTimeout 的延迟时间都是 i * 1000 毫秒，也就是说每个异步任务的执行时间都是不同的。但是最终输出的结果却是 5 个 5，而不是分别输出 0, 1, 2, 3, 4。

出现这个问题的原因就是因为变量 i 在 setTimeout 的回调函数中被共享了，它们都指向了同一个变量。因为这个问题可以使用闭包来解决，我们来看一下代码示例：

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

在这个示例中，我们将变量 i 传递给了匿名闭包，避免了它们共享同一个作用域，这样就能够分别输出 0, 1, 2, 3, 4 了。

示例二

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

在这个示例中，我们使用了 ES6 的 let 关键字，而不是 var。由于 let 会在每次循环时创建一个新的块级作用域，所以 i 的值不会被共享。因此示例中的代码就不需要使用闭包了，可以直接输出 0, 1, 2, 3, 4。

总结

本文中，我们讲解了一道 JS 前端闭包面试题的解题思路，介绍了问题产生的原因，并给出了使用闭包和使用 let 关键字的两种解决方案。希望本文能够帮助读者更好地理解闭包的概念，并能够在实际开发中正确地使用它。