for循环绑定事件监听器时始终获取最后一个tab元素的问题

问题根源 #

这段代码存在闭包变量捕获的经典问题：
在for循环中，事件监听的回调函数（匿名函数）捕获的是循环变量tab的引用，而非每一次迭代时的tab值。由于回调函数是异步执行（点击时才触发），当循环结束后，tab已经指向数组的最后一个元素，因此无论点击哪个标签，都会使用最后一个tab的值。

修复方案 #

方案1：使用let声明循环变量（最简现代方案）

在for循环中用let声明tab，利用ES6的块级作用域特性，为每一次迭代创建独立的变量绑定：

for(let tab of tabGroupMain.tabs) { // 添加let声明
    tab.button.addEventListener("click", function(ev) {
        UI.ToggleTab(tab.content, tabGroupMain);
    });
}

方案2：使用立即执行函数表达式（IIFE）创建独立闭包

如果需要兼容ES5环境，可以用IIFE为每个迭代封装独立的作用域：

for(tab of tabGroupMain.tabs) {
    (function(currentTab) {
        currentTab.button.addEventListener("click", function(ev) {
            UI.ToggleTab(currentTab.content, tabGroupMain);
        });
    })(tab); // 将当前tab作为参数传入，创建独立绑定
}

方案3：使用bind绑定参数

通过Function.prototype.bind将tab.content直接绑定到回调函数中，避免闭包捕获问题：

for(tab of tabGroupMain.tabs) {
    tab.button.addEventListener("click", UI.ToggleTab.bind(null, tab.content, tabGroupMain));
}

注：bind的第一个参数是this上下文（这里用null即可，因为UI.ToggleTab可能不需要特定this），后续参数会作为前置参数传递给UI.ToggleTab。

方案4：箭头函数结合块级作用域

箭头函数配合let使用，效果与方案1一致，代码更简洁：

for(let tab of tabGroupMain.tabs) {
    tab.button.addEventListener("click", (ev) => {
        UI.ToggleTab(tab.content, tabGroupMain);
    });
}

验证说明 #

修复后，每个事件回调都会关联对应迭代的tab实例，点击不同标签时，UI.ToggleTab会收到正确的tab.content参数，符合预期行为。

内容的提问来源于stack exchange，提问作者x8c8r