闭包和作用域 （for循环中的setTimeout）

注: 本文内容参考 《你不知道的JavaScript（上卷）》

思考有如下代码：

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

正常情况下，我们对这段代码行为的预期是分别输出数字 1~5，每秒一次，每次一个。 但实际上，这段代码在运行时会以每秒一次的频率输出五次 6。

这是为什么？

首先解释 6 是从哪里来的。这个循环的终止条件是 i 不再 <=5。条件首次成立时 i 的值是 6。因此，输出显示的是循环结束时 i 的最终值。

仔细想一下，这好像又是显而易见的，延迟函数的回调会在循环结束时才执行。事实上， 当定时器运行时即使每个迭代中执行的是 setTimeout(…, 0)，所有的回调函数依然是在循 环结束后才会被执行，因此会每次输出一个 6 出来。

这里引伸出一个更深入的问题，代码中到底有什么缺陷导致它的行为同语义所暗示的不一 致呢？

缺陷是我们试图假设循环中的每个迭代在运行时都会给自己“捕获”一个 i 的副本。但是根据作用域的工作原理，实际情况是尽管循环中的五个函数是在各个迭代中分别定义的， 但是它们都被封闭在一个共享的全局作用域中，因此实际上只有一个 i。

这样说的话，当然所有函数共享一个 i 的引用。循环结构让我们误以为背后还有更复杂的 机制在起作用，但实际上没有。如果将延迟函数的回调重复定义五次，完全不使用循环， 那它同这段代码是完全等价的。

下面回到正题。缺陷是什么？我们需要更多的闭包作用域，特别是在循环的过程中每个迭代都需要一个闭包作用域。

IIFE 会通过声明并立即执行一个函数来创建作用域。
那下面这段代码能够按预期输出1~5吗?

这样不行。但是为什么呢？

我们现在显然拥有更多的词法作用域了。的确 每个延迟函数都会将 IIFE 在每次迭代中创建的作用域封闭起来。 如果作用域是空的，那么仅仅将它们进行封闭是不够的。仔细看一下，我们的 IIFE 只是一 个什么都没有的空作用域。它需要包含一点实质内容才能为我们所用。 它需要有自己的变量，用来在每个迭代中储存 i 的值：

改进一下变成:

仔细思考我们对前面的解决方案的分析。我们使用 IIFE 在每次迭代时都创建一个新的作用域。换句话说，每次迭代我们都需要一个块作用域。

这里有个知识点: let 声明，可以用来劫持块作用域，并且在这个块作用域中声明一个变量。 本质上这是将一个块转换成一个可以被关闭的作用域。
因此，下面这些看起来很酷的代码 就可以正常运行了：

但是，这还不是全部！for 循环头部的 let 声明还会有一个特殊的行为。这个行为指出变量在循环过程中不止被声明一次，每次迭代都会声明。随 后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

这样程序就会按照预期输出1-5了