JS中如何理解经典案例 for 循环中的闭包

js关于for循环中的闭包问题？

for(var i=0,arr=[];i<=3;i++) {
arr.push(function(){alert(i)});
}
arr0; // ?? 结果不是0
arr1; // ?? 全是4
改装后
for(var i=0,arr=[];i<=3;i++) {
arr.push(
(function(i){
return function(){
alert(i)
}
})(i)
);
}
使用闭包可以解决了，为什么第一次代码中的i读取的一直是I变量的最后的结果呢?
那个大神能给分析一下第一段代码的执行的具体步骤呢？

图例：绿框为函数执行的栈内存，粉色为堆内存，0XAA为内存地址（存储着函数的字符串，并不会执行，当函数被调用时才会拿出来执行），沿着主流程从上到下看来看

在修改之前的原始版分中，arr中每一项执行时，都会去上级作用域寻找i，而i在for循环执行结束后就已经变成了4，所以arr中每一项执行的结果都是一样的。函数在预解释阶段，都被当成字符串存入堆内存，在真正执行时，才会被拿出来执行，数组中存储的，其实只是指向这个堆内存的指针，i并没有传进去，执行的时候i才被传进去。

• 这是修改之后的运行过程：
  

修改之后的版本中，arr中每次添加新项是都会使得自执行函数执行，并将i作为参量传入了自执行函数，关键点是 function(i){…}(i)中第一个i是函数的形参，是私有变量，与外面的i没有关系，被私有作用域保护起来了，第二个i才是函数中外面的i（也就是说第一个i只是一个迷惑人的量，你改成k也是一样的结果，只不过是把i赋给k而已），这样一来，每次触发自执行函数时，都相当于将当前循环的变量i存储了下来。当arr中每一项执行时，调用了自执行函数返回的一个新地址的函数，这个新地址的函数会去上级作用域去寻找i，上级作用域是形成这个新地址时的自执行函数（意思就是0xA1这个地址是从0XAA函数第一次执行return得到的，0XAA第一次执行时的栈内存就是0XA1的上级作用域），上级作用域中的i（或者说是上级作用域中那个形参）就是他要找的i，故能达到你要的效果。这种保护私有变量的机制就是闭包。至于什么js缺陷、bug之类的论调大可歇歇了（至少这个问题不算是bug）。开惯了自动挡的人，非要嘲笑手动挡的车离合油门配合不当容易熄火，有意思么？人家原理就是这样的，至少作为前端语言还是不错的。非要拉出去和工业语言一较高下，算我没说。

作者：天浩
链接：https://www.zhihu.com/question/33468703/answer/85182587
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。