一不小心就會踩到的雷

Closure 最常踩到的雷就是當 Closure 在使用 var 設定 counter 的 for loop 當中使用,一不小心就會出乎我們的預期。

Version


ECMAScript 5
ECMAScript 2015

Closure in Loop


1
2
3
4
5
6
7
8
9
10
11
12
13
const func = () => {
let result = [];

for(var i = 0; i < 3; i++) {
result.push(() => i);
}

return result;
};

console.log(func()[0]());
console.log(func()[1]());
console.log(func()[2]());

loop000

原本我們預期 i 為定義時的 i,而非執行完時的 i,所以應該印出 012,但卻都全部印出 3

原因在於我們只是將 () => i 放進 array 中並未執行,然後將整個 array 回傳。

[0]() 對 array 中的 () => i 執行時,由於本身的 scope object 找不到 i,因此會透過 outer property 找到 func() 的 scope object 的 i,此時 var i 已經執行完為 3,因此 3 個 function 的 i 都會得到 3

IIFE


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const func = () => {
let result = [];

for(var i = 0; i < 3; i++) {
(i => {
result.push(() => i);
})(i);
}

return result;
};

console.log(func()[0]());
console.log(func()[1]());
console.log(func()[2]());

剛剛寫法最大的問題在於 () => i 的 scope object 本身沒有 i,在 for loop 中的 () => i 共用了相同的 scope object,在 ECMAScript 5 可以使用 IIFE 為每個 () => i 建立新的 scope object。

loop001

Let


1
2
3
4
5
6
7
8
9
10
11
12
13
const func = () => {
let result = [];

for(let i = 0; i < 3; i++) {
result.push(() => i);
}

return result;
};

console.log(func()[0]());
console.log(func()[1]());
console.log(func()[2]());

若使用 ECMAScript 2015,就有更直覺的寫法了,因為 let 使每個 {} 都有自己的 scope object,因此等同於使用 ECMAScript 5 的 IIFE。

loop002

Array.prototype.map


1
2
3
4
5
const func = () => [0, 1, 2].map(i => () => i);

console.log(func()[0]());
console.log(func()[1]());
console.log(func()[2]());

若使用 Array.prototype 下的 method 使用 Closure 也沒有問題,因為每個 () => i 都有新的 scope object, 所以 i 都是定義時的 i,而非執行完後的 i

loop003

Conclusion


  • 若要在 for loop 中使用 Closure,建議改用 ECMAScript 2015 的 let
  • 改用 Array.prototype 下的 method 也能避免 Closure 抓到執行完後的變數
2018-12-09