JavaScript 經典閉包陷阱：for 循環綁定點擊事件為何總輸出最後一個索引？

新手常遇到的問題：在 for 循環中為多個按鈕綁定 onclick，點擊時彈出的卻是循環結束後的 i 值（如 3），而非對應的 0、1、2。根因在於 var 變量作用域是函數級，回調函數引用的是同一個 i，當事件觸發時循環已結束。

錯誤示範

for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() { alert(i); }; // 全輸出 3
}

解決方案一：立即調用函數表達式 (IIFE) 創建閉包

for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = (function(index) {
        return function() { alert(this.value + '|' + index); };
    })(i);
}

解決方案二：使用 let 塊級作用域 (ES6+)

for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() { alert(this.value + '|' + i); };
}

解決方案三：利用 this 直接取值（無需索引）

for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() { alert(this.value); };
}

理解閉包與變量作用域，是進階前端工程師的必修課。