原代码来自ruan老师ES6书,作为var和let对比的说明。

 

我特地去SF社区问了下,得到了一些大佬们很好的回答。我这里总结一下。

 

1. 必须记住的两点:函数作用域是声明时确定的,函数内的值是执行时确定的!

所以执行时去确定i,注意function函数参数列表里没有传入i的值,会去外层作用域找,此时i已经在遍历完变成了10。

 

2. 变量i是var命令声明的,在全局范围内都有效。这跟C语言中的for循环里的临时变量i很大不同了 =-=。

每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,而函数内的值是执行时确定的,导致运行时输出的是最后一轮的i的值,也就是 10。

3.如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 6

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。那么我们可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值(i自加的计算),从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

 然后解决方案是:

既然函数作用域是声明时确定的,函数内的值是执行时确定的,那么我可以声明一个匿名函数,让他每次i循环时就立即自执行,对了,就是闭包。

for ( var i=0; i<10; i++ ) {

(function(i){
a[i] = function () {
console.log(i)
}
})(i)
}

这里有一个匿名自执行的函数 在i循环的时候就取到了当前的i的值

 

然后深入的话,可以看这个系列的 http://www.cnblogs.com/wangfupeng1988/p/3977924.html,很系统的说明了。

我在sf问的问题:https://segmentfault.com/q/1010000012229085?_ea=2917221

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐