[译]JS闭包:For循环中的setTimeout

译者：嘴里起了个泡
原文地址： wsvincent.com/javascript-…

这篇文章详细介绍了JS在执行for循环里面的 setTimeout() 语句的时候发什么了什么。这是面试中经常会被问到的一个问题，因为这个问题的答案涉及到了几个JS的核心知识点：闭包（closures），提升（hoisting）和事件循环（the event loop）。

For循环

For循环是JS开发中经常使用的。它会一直运行直到其中的判断条件为false。一个For循环包含三个分句：一个初始化表达式，一个条件表达式和一个更新表达式。

for (var i = 1; i < 5; i++) {console.log(i);  // 1 2 3 4
}
复制代码

现在我们的三个分句如下：

初始化：var i = 1
条件： i < 5
更新：i++

需要注意的是在这个for循环结束的时候，变量i的值实际上是5，不是4。我们从初始化开始，每次i递增1，然后检查i是否满足条件。换句话说，我们会按照1，3，2的顺序执行这三个分句，尽管逻辑上会认为它们应该按顺序执行。
让我们来检查一下for循环里实际发生了什么：

第一步：i值为1，增加到2，检查2 < 5?满足条件，所以打印输出。
第二步：i值为2，增加到3，检查3 < 5?满足条件，所以打印输出。
第三步：i值为3，增加到4，检查4 < 5?满足条件，所以打印输出。
第四步：i值为4，增加到5，检查5 < 5?不满足条件，终止循环。
现在我们清楚了，为什么i最终等于5，但是却只打印出来了1-4。我们可以通过下面代码来证明这点。

for (var i = 1; i < 5; i++) {console.log(i); // 1 2 3 4
}console.log("The value of i is now: ", i); // "The value of i is now: 5"
复制代码

闭包

关键字Var的作用域是函数范围内，意味着它位于一个封闭的函数中。但我们上面的例子中并没有函数，所以它的作用域就是全局。也就是说，上面的for循环创建了一个全局变量i。
请注意，既然var的作用域是函数范围内，那么i的作用域就会被设置到离它最近的函数中。在这个例子中，它将会是全局变量。

setTimeout

如果我们想在循环中每秒输出一次应该怎么做呢？我们会想当然的认为只要添加一个setTimeout方法就能达到这个效果。

for (var i = 1; i < 5; i++) {setTimeout(() => console.log(i), 1000)  // 5 5 5 5
}
复制代码

事与愿违！！！为什么没有输出1 2 3 4呢？在这个微妙的例子中实际上发生了很多事情。
简单的回答就是for循环先执行掉了，然后再去寻找i的值，发现是5，然后把它打印了四次，每个循环打印一次。
即使我们把循环的时间间隔设置成0，结果还是一样的。

for (var i = 1; i < 5; i++) {setTimeout(() => console.log(i), 0)  // 5 5 5 5
}
复制代码

我相信你对此肯定很疑惑。不用担心：你很快就会知道这到底是怎么回事了。

JavaScript 运行引擎

JavaScript是单线程单一并发语言，这意味着它一次只能处理一个任务或一段代码。让我们接着看：所以我们如何用它写出异步的代码呢，就比如上面例子中的setTimeout()？答案是JavaScript运行在浏览器中，浏览器做了很多事情不仅仅是执行代码这么简单。事实上，浏览器需要考虑这四个部分：

JavaScript运行时引擎
浏览器提供的Web APIs，比如DOM,setTimeout等等
具有回调函数（如onClick和onLoad）的事件的回调队列
事件循环

下面这个图片来自Philip Roberts’s fantastic talk on the Event Loop视频里的截图：

运行引擎执行我们的代码，每个浏览器都有一个稍微不同的引擎。例如，Chrome使用V8引擎，这也恰好为NodeJs提供支持。该引擎一次只能执行一段代码。
Web APIs是浏览器提供给我们的，其中包含了像setTimeout()这种方法。如果你在浏览器的控制台把window打印出来，你会看到一个很长很长的默认的API列表。

这些API是由浏览器在一个单独的进程里独立运行的。这就是JavaScript可以发生异步的原因！！！ 并不是JavaScript本身可以同时做多件事;而是，浏览器可以同时为我们运行多个不同的进程。到这里我希望你提出的问题是，运行引擎和Web API 是怎么样相互协同工作的？答案是通过回调队列和事件循环。
回调队列它是需要在JavaScript运行引擎中断后执行的一个任务队列。
事件循环是最后一个需要破解的谜团，它是一个不断运行的循环，用来连接堆栈和回调队列。接下来让我们看一下它们在我们for循环和setTimeout的例子中是如何一起运行工作的。

闭包

setTimeout可以通过闭包拿到i的值。我们把i放在console.log语句里，但是i的值却被设置在外面一层的封闭范围内，即for循环里。既然内部函数可以拿到外部函数的变量，我们就能去for循环里取到i的值，即5。