如何使用JavaScript for循环创建按钮并绑定点击事件？点击按钮时为何总是获取数组最后一项的值？

嘿，这个问题我太熟了——这是JavaScript里经典的闭包作用域陷阱，我来给你掰扯明白：

问题根源：var的作用域与闭包陷阱 #

你遇到的问题核心是**var声明的变量没有块级作用域**，再加上闭包的特性共同导致的：

• 用var声明的i、style、btnElement都是函数级（或全局）作用域的变量，整个循环过程中，所有迭代共享这同一个变量的引用，而不是每次迭代都创建新变量。
• 你给按钮绑定的onclick函数是一个闭包，它会“记住”外部作用域的变量，但这个函数并不会在循环时执行，而是等到用户点击按钮才触发。此时循环已经完全结束，i已经变成了数组的长度值，style和btnElement也都指向了最后一次迭代的结果，所以不管点哪个按钮，输出的都是最后那个值。

三种常见的解决思路 #

1. 用let替代var（ES6+推荐方案） #

let是ES6引入的块级作用域变量，每次循环迭代都会创建新的变量实例，每个闭包都会捕获当前迭代的那个变量：

for (let i = 0; i < propertySidebarItem.styles.length; i++) {
    // 当前要使用的属性样式
    let style = propertySidebarItem.styles[i];
    // 使用当前样式创建按钮
    let btnElement = document.createElement('button');
    btnElement.className = 'btn ' + element.tagName + style.name;
    // 点击任意按钮时，显示按钮属性
    btnElement.onclick = function () {
        console.log(btnElement);
        console.log(style); // 现在能拿到当前按钮对应的style了
    };
}

2. 立即执行函数表达式(IIFE)包裹（兼容ES5及更早版本） #

如果需要兼容旧环境，可以用IIFE为每次迭代创建独立的作用域，把当前的变量作为参数传入，让闭包捕获这个独立作用域里的变量：

for (var i = 0; i < propertySidebarItem.styles.length; i++) {
    // 当前要使用的属性样式
    var style = propertySidebarItem.styles[i];
    // 使用当前样式创建按钮
    var btnElement = document.createElement('button');
    btnElement.className = 'btn ' + element.tagName + style.name;
    // 用IIFE创建独立作用域，保存当前迭代的变量
    (function(currentStyle, currentBtn) {
        btnElement.onclick = function () {
            console.log(currentBtn);
            console.log(currentStyle);
        };
    })(style, btnElement);
}

3. 使用bind绑定参数 #

也可以通过Function.prototype.bind把当前的变量绑定到点击函数的参数上，确保点击时能拿到正确的值：

for (var i = 0; i < propertySidebarItem.styles.length; i++) {
    var style = propertySidebarItem.styles[i];
    var btnElement = document.createElement('button');
    btnElement.className = 'btn ' + element.tagName + style.name;
    // 绑定当前的style和btnElement到点击函数
    btnElement.onclick = function (currentStyle, currentBtn) {
        console.log(currentBtn);
        console.log(currentStyle);
    }.bind(null, style, btnElement);
}

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