ES6的let在for循環(huán)經典問題如何起作用？

問題

在復習ES6的塊級作用域時候又遇到了for循環(huán)的經典問題，即

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

如何使得輸出依次為1到9，使用ES6，一般這樣做：

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

我的誤解

我認為上述答案也可以寫成：

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

輸出：10？ 和想象中不一樣??？為什么不是6?

我的理由

塊級作用域是以{}標識的，for循環(huán)應該生成十個{}子塊作用域
每個子塊{}中關聯(lián)的是相應的i，即每次循環(huán)的i值
let放在for語句內和for語句外部應該都在十個{}子塊的外部嗎？

請問我的錯誤出在哪里？

回答

編輯回答

青檸

for的每次循環(huán)算一個作用域，放外面不行

2017年4月13日 09:31

編輯回答

礙你眼

感謝@ezmo和@xialeistudio的回答，這個問題最終還是在站內搜到了。https://segmentfault.com/a/11...
@冴羽提到，for循環(huán)中的let是標準特別定義的部分，實際上以下代碼：

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

可以分解為：

// 偽代碼
(let i = 0) {
    funcs[0] = function() {
        console.log(i)
    };
}

(let i = 1) {
    funcs[1] = function() {
        console.log(i)
    };
}

(let i = 2) {
    funcs[2] = function() {
        console.log(i)
    };
};

這與“經驗”不符，這是造成錯誤理解的根本。從C語言角度看，for中變量定義和for外定義是一樣的，因為語言本身只在變量定義位置初始化一次，但js中這個for內外的let處理是有不同的內在機制的。@ezmo的回答實際上解釋了這種情況，但不了解for內let有獨特處理標準還是云里霧里的，誰能想到簡單的for中有這樣一種語法定義？

2018年9月21日 03:51

編輯回答