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的值都是不同的。