JavaScript 循環綁定點擊事件閉包陷阱：變量提升導致全指向最後一項

錯誤代碼（方案 1）

for (var i = 0; i < links.length; i++) {
    var target = links[i].href; // 共享同一變量
    links[i].onclick = function() {
        image.src = target; // 全指向最後一個 target
        return false;
    };
}

正確代碼（方案 2）

for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {
        image.src = this.href; // ✅ 使用 this 獲取當前元素屬性
        return false;
    };
}
// 或用閉包鎖定值
for (var i = 0; i < links.length; i++) {
    (function(href) {
        links[i].onclick = function() {
            image.src = href;
            return false;
        };
    })(links[i].href);
}

核心原理

• var 無塊級作用域，循環中 target 被所有閉包**共享引用**；
• 循環結束後 target 保留最後一次賦值，所有事件處理函數讀取同一變量；
• 方案 2 直接用 this.href 訪問當前 DOM 屬性，無需外部變量；
• 現代寫法：let (ES6) 具有塊級作用域，每次迭代創建新綁定，天然解決：

for (let i = 0; i < links.length; i++) {
    links[i].onclick = () => { image.src = links[i].href; return false; };
}