在 JavaScript 中，for 迴圈與 setTimeout 的組合，經常會引發閉包與作用域的問題，導致結果與預期不符。
這篇文章將探討這種情境，並介紹兩種解決方法，使得以下程式碼能夠正確輸出 1 2 3。
問題說明（在不能將 var 修改成 let 的條件下）
以下代碼的目標是讓程式輸出 1 2 3：
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i);
}, 0)
}
console.log(i);在解決這個問題時，我們必須在不更動 var 宣告的情況下達到正確輸出。
通常，在 JavaScript 中使用 let 來宣告變數可以限制其作用域至每次迴圈內部，但這裡不得更動 var。
因此，需要其他方式，使每次迴圈中的 i 值在異步操作時不受後續迴圈影響。
當這段代碼執行時，console.log(i) 的結果並非 1 2 3，而是 3 3 3
原因在於，for 迴圈中的 var i 是一個全域變數，每次迴圈中並未將 i 綁定到該次迴圈。
因此 setTimeout 在迴圈結束後才執行，最終輸出重複的值。
解決思路 1：使用 bind 綁定變數
解決方案
為了解決這個問題，可以使用 bind 方法，將當前的 i 值綁定到一個新的函數中，確保 i 值在每次迴圈中獨立存在，並在異步操作執行時仍然保持該次迴圈的 i 值。
bind 方法的觀念
在 JavaScript 中，bind 方法會創建一個新的函數，並將特定的參數與函數綁定。
此方法可以用來綁定當前 i 值，保證每次迴圈中的 i 值獨立，避免受後續變數影響。
實作代碼
以下是使用 bind 方法綁定變數的程式碼：
for (var i = 0; i < 3; i++) {
const aa = ((n) => {
console.log(n);
}).bind(null, i);
setTimeout(aa, 0);
}在這段程式碼中，我們將當前的 i 值作為參數傳遞給 bind 方法，創建了一個新的函數 aa，並綁定當前的 i 值給 n，使其在 setTimeout 執行時能輸出獨立的 i 值。
運行結果
透過 bind，我們為每次迴圈的 i 值創建了一個新的綁定，因此最終輸出將會是 1 2 3，因為每次執行 setTimeout 時，使用的是當前迴圈的 i 值副本。
解決思路 2：使用 IIFE 綁定變數
解決方案
另一種解法是使用立即執行函數 (IIFE)，為每次迴圈建立一個新的作用域，使得 i 值在每次執行時獨立存在，確保 i 不會受到後續迴圈的影響。
IIFE 的概念
立即執行函數 (IIFE, Immediately Invoked Function Expression) 是一種 JavaScript 表達式，可以在定義後立即執行。
IIFE 能夠建立新的作用域，在處理異步操作時可以捕捉當前值，避免後續變數的影響。
實作代碼
以下是利用 IIFE 綁定變數的程式碼：
for (var i = 0; i < 3; i++) {
setTimeout(((n) => {
console.log(n);
})(i), 0);
}在此解法中，我們使用 IIFE 在每次迴圈中立即執行並傳入當前的 i 值。
這樣 n 值在 IIFE 作用域內保持不變，確保每次執行的 setTimeout 引用的是當前 i 的值。
運行結果
此方式通過 IIFE 捕捉每次迴圈的 i 值，並作為局部變數 n 使用，最終結果同樣是 1 2 3，因為 setTimeout 中引用的是當時 n 的獨立值。
結論
透過使用 bind 或 IIFE，能夠在不修改 var 為 let 的情況下正確捕捉每次迴圈的變數 i 值，解決 JavaScript 中常見的閉包問題。
理解並掌握這些解決方法，將有助於在 JavaScript 中更有效地控制變數作用域。