网易JS面试题与Javascript词法作用域说明

下面是关于“网易JS面试题与Javascript词法作用域说明”的完整攻略。

网易JS面试题简介

网易曾经在招聘时使用过一个著名的 JavaScript 面试题：

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

预期的输出结果应该是 0 1 2 3，但是实际的输出结果却是 4 4 4 4。

原因分析

这个面试题涉及到了 JavaScript 中闭包和词法作用域的概念，其中主要涉及到了以下几个问题：

1. JavaScript 中 setTimeout 的工作机制是什么？
2. JavaScript 中变量作用域的工作机制是什么？

接下来我们会详细探讨这两个问题。

setTimeout 工作机制

setTimeout 实际上是一个异步操作，它会将后面的任务交给浏览器的任务队列（task queue）来执行，等到当前线程的任务全部执行完成以后，再执行队列中的任务。也就是说，setTimeout 不会造成阻塞，而是按照自己设定的时延，等到任务队列中没有待执行的任务时才执行。

例如，在上面的代码中，当我们执行到第一次调用 setTimeout 时，setTimeout 会让后面的任务推迟到下一次事件循环再执行，此时循环已经结束，变量 i 的值已经变成了 4，因此后面的 setTimeout 函数的回调都会输出 4。

词法作用域的工作机制

JavaScript 使用词法作用域（Lexical Scope）来确定一个变量的作用范围，词法作用域是静态的，它关注函数被定义的位置，而不关心它被调用的位置。

例如，在上面的代码中，var 的定义为全局作用域，而不是for循环体中的块级作用域。因此，在循环结束后，变量 i 的值被更新为了 4，而后面的 setTimeout 函数都是在全局作用域中执行，因此会认为 i 的值是 4。这样每次输出的都是 4。

版本一：使用闭包

一种解决方法是使用闭包，将变量 i 的值保存在一个闭包中，代码如下所示：

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

使用立即执行函数（IIFE）创建一个闭包，将变量 i 的值传递到闭包中，每个闭包都有自己的作用域，因此可以将当前循环的变量 i 的值保存在闭包中。这样就可以输出预期的结果。

版本二：使用 let 关键字

在 ES6 中，我们可以使用 let 关键字来声明块级作用域的变量，它的作用域仅限于当前的块级作用域，也就是说，在循环体中声明的 let 变量，在每次循环迭代时都会重新绑定一次。

for(let i = 0; i < 4; i++) {
  setTimeout(() => console.log(i), 0);
}

使用 let 定义变量 i，在每次迭代中都会重新绑定当前迭代的值，因此可以输出预期的结果。

总结

以上两种方法都可以解决这个面试题，它们都是通过将变量的作用域限制在块级作用域中来避免变量共享的问题，从而达到预期的结果。在实际应用中，我们应该优先使用 let 关键字来声明变量，这样可以避免一些诡异的行为。