JavaScript中如何在onclick回调内获取按钮数组索引i（不使用this）

问题原因 #

你当前代码点击所有按钮都输出button 5的问题，本质是**var声明的变量不存在块级作用域**：整个for循环共用同一个i变量，循环结束后i的值已经变成5，触发点击回调时读取的都是最终的i值。

实现方案 #

方案1：使用let声明循环变量（最简便，ES6+支持） #

let支持块级作用域，每次循环都会创建独立的变量绑定，回调函数可以直接拿到对应循环的索引值：

document.addEventListener("DOMContentLoaded",function(){
    const buttons = document.getElementsByClassName('btn');
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function(){
            console.log("button " + i)
            // 直接用i操作对应按钮即可
            buttons[i].classList.add("something")
        }
    }
},false)

方案2：立即执行函数(IIFE)封装（兼容ES5及更早版本） #

如果需要兼容低版本浏览器，可以用IIFE把每次循环的i值封装到独立的函数作用域里：

document.addEventListener("DOMContentLoaded",function(){
    var buttons = document.getElementsByClassName('btn');
    for (var i = 0; i < buttons.length; i++) {
        (function(index) {
            buttons[index].onclick = function(){
                console.log("button " + index)
                buttons[index].classList.add("something")
            }
        })(i) // 把当前的i作为参数传入立即执行函数
    }
},false)

方案3：用forEach遍历按钮集合 #

把获取到的类数组转成数组后用forEach遍历，迭代回调自带的索引参数天然就是对应元素的下标，不需要额外处理作用域：

document.addEventListener("DOMContentLoaded",function(){
    const buttons = Array.from(document.getElementsByClassName('btn'));
    buttons.forEach(function(button, index) {
        button.onclick = function() {
            console.log("button " + index)
            buttons[index].classList.add("something")
        }
    })
},false)

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