JS: 当 let 和 var 遇上for循环

for (var i = 0; i < 2; i++) {
    setTimeout(() => {
        console.log(i);
    })
}

//2
//2

上图代码的执行结果是两个2。对异步编程有所了解的可能都知道setTimeout里的callback会在event loop的队列里堆积，知道i++操作完成。所以打印出两个2。而这里需要注意的是var i变量。因为没有任何函数封装，所以i将成为全局变量。

for (let i = 0; i < 2; i++) {
    setTimeout(() => {
        console.log(i);
    })
}

//0
//1

当var被修改成let时，情况发生了改变。程序执行结果是1和2。首先需要认识到let和var在作用域上的差别。var被圈定在函数内，而let被圈定在任何有中括号的范围内。虽然上图的for循环没有将i圈定在中括号内，但ES6仍然在此机制上给let设定了属于自己的作用域。不止如此，因为结果打印出了0和1，我们能肯定每一个i的值都有一个属于自己的作用域，i并没有被新的值所覆盖。当setTimeout的回调被启动时，函数会去外层的作用域寻找i的值，而两个回调都拥有不同的作用域所以导致每次获取i的值都是不同的。