闭包的经典面试题
说到闭包，那么这个经典的闭包面试题，大家肯定都很熟悉：
for(var i = 0;i < 5; i++ ) {
setTimeout(function(){
console.log(i);
},0)
}
// 输出：5,5,5,5,5
这个例子当中为什么i输出的都是5呢？
能够清楚的解释这道题，需要的前置知识不仅仅需要闭包，我们还需要知道：
- var变量声明所挂载的作用域
- JS事件循环，宏任务微任务的执行顺序，理解setTimeout以及其回调的执行顺序
- JS执行时作用域链和执行上下文
了解了这些前置知识之后，这段代码的执行顺序就可以解释了：
代码运行逻辑描述
首先，我们知道在JS执行的时候，会先进行函数和变量声明的解析。
var声明的变量是挂载到函数作用域当中的。
在这段代码当中，函数作用域是全局作用域，所以var声明的i在执行的最开始，被挂载到全局作用域当中（在浏览器中是window对象）。
setTimeout的回调属于宏任务，所以这段代码的执行顺序是：
- for循环的每一轮循环结束之后，挂载到window上面的
变量i， - 数值被一轮一轮更新，而setTimeout的5次回调都还没被执行，而是被放到了宏任务队列里面。
因此，在setTimeout开始执行之前，因为for循环已经执行完毕了，所以i其实已经变成5。
这个时候setTimeout的回调开始执行的时候，再去访问变量i，由于回调函数里面没有声明变量i，所以会继续在作用域链上去搜索，搜索到window上的i，此时i是5。
而宏任务列队中的，每个setTimeout的回调，都是与上一个步骤一样的步骤，最后都是访问到，window上面的变量i，而变量i在宏任务执行之前，早就已经是5了，所以最后输出的结果是输出5个5。
如何修改代码
- 如果我们希望这个for循环里面，能输出1，2，3，4，5的话，可以用let和立即执行函数来改写
let版本
for(let i = 0;i < 5; i++ ) {
setTimeout(function(){
console.log(i);
},0)
}
// 输出1，2，3，4，5
为什么把var变量声明改成let之后，它就可以正常输出1，2，3，4，5呢？
首先，我们需要先学习下let,var,const变量声明的相关知识。
【ECMA学JS】深入let、const、var变量声明特性、声明提升与暂时性死区
let变量声明和var变量声明的最显著的差别：
- let声明的变量是挂载到块级作用域下面的。
- 块作用域的出现通常和
{}的出现关联。
然而，就算知道了let和var的差别我还是很懵逼……
for循环就一个{}出现了，不是说好的let不能声明同名的变量吗？
为什么这段代码不仅不报错还能正确执行呢？
ECMA-For循环
我们先来看下ECMA的for循环的处理过程
我们将for循环大概的过程描述一下：
1.将循环外环境设置为是当前执行上下文的词法环境
2.检查绑定变量是否是const声明，因为const不允许变量重复声明，提前进入报错环节
3.非const声明的变量，就继续执行ForBodyEvaluation，即处理循环体内信息。
我们可以看到ForBodyEvaluation中有个关键步骤是CreatePerIterationEnvironment(perIterationBindings).
CreatePerIterationEnvironment大概的执行过程就是：
如果在循环前有绑定变量
- 把最近一轮循环的词法环境设置为执行上下文的词法环境
- 把执行上下文的outer指针设置为：最近一轮循环的上下文环境
- 为当前循环创建新的执行上下文环境。
- 把此上下文设置为执行上下文
到这边，我觉得已经能解释let为什么能让这个循环输出正确的数值了。
首先，从语法上，for循环体是被包含在{}当中，{}本身其实就是一个块级的作用域，所以let的变量声明是挂载到{}的块级作用域上面的。
我们从文档上知道了，每轮for循环其实都会创建一个新的执行上下文环境，这个环境是属于块级作用域而不是函数作用域。
并且在CreatePerIterationEnvironment这一步上，JS会把上一轮循环的词法环境的变量信息赋值给当前新创建的执行上下文。
所以，总结来说，就是
- for循环的每一轮循环，
{}都会创建一个新的块作用域和块级的上下文。 - 每一轮上下文的词法环境（就是变量声明和绑定内容），都是从上一轮循环里面拷贝来的，所以每次循环体内容执行之前，let i其实都是重新声明的，只是它的声明信息和绑定的数值信息是拷贝的上一轮循环。
- let能够输出递增的数字，就是因为let声明的变量是挂载到
{}作用域的词法环境里面，一轮循环结束，这个词法环境保存的是当前循环的数字。 - 事件队列当中的任务，对应的词法环境是当前循环的词法环境，词法环境里面保存的是某一轮循环对应的变量，而不是想var声明的变量一直是同一个变量。
- 而为什么for循环语句不能使用
const去声明变量呢？就是因为这个CreatePerIterationEnvironment步骤会给声明i先赋上一轮循环的数值，然后等循环体执行之后，声明的i数值是要更新的，而const声明的基本数据类型不能被重复赋值，所以const来声明循环语句变量会报错Assignment to constant variable
所以，我们可以发现，解决这个问题核心的思路不外乎就是，
把每一次循环所读取的变量分开保存到不同执行上下文里面。
那么立即执行函数版本解决这个问题的思路就比较好分析了。
立即执行函数版本
首先还是先学习下什么是立即执行函数，以及内部的细节
【JS】立即执行函数（IIFE）/函数声明/表达式解析
我们了解到，立即执行函数等函数表达式，在执行时，会把它运行时的词法环境赋值给执行上下文。
所以形如(function(i){ ...function body })(i);的函数表达式，在被执行的时候，会把当前循环体的变量i，保存到当前执行上下文的词法环境当中，i的取值也自然被保存了，此时函数表达式的词法环境中的i跟for循环体里面那个i就不是同一个变量了，函数表达式中的i，只是对应循环时，i的声明和赋值的复制。
所以当setTimeout的回调被触发的时候，回调指向的是函数表达式保存下来的执行上下文。
每一轮循环，就产生一次新的函数表达式的执行，自然就产生了新的词法环境，所以每次循环都能输出我们想要的数值。
for(var i = 0;i < 5; i++ ) {
(function(i){
setTimeout(function(){
console.log(i);
},1000)
})(i);
}
for(var i = 0;i < 5; i++ ) {
setTimeout((function(){
console.log(i);
})(i),1000)
}
// 输出1，2，3，4，5
