JavaScript中var变量循环绑定点击事件后输出值异常的疑问

你的代码如下：

<button class="btn">aa</button>

<script>
    var aBtn=document.getElementsByClassName('btn');

    var i = 0;

    while(i<aBtn.length){

        aBtn[i].onclick = function(){
            console.log(i);
                // 1  ??????
        }            
        i++
    }

</script>

点击按钮输出1而非0的核心原因是**var的作用域特性与闭包的延迟绑定**：

• var声明的i是全局作用域变量，整个循环过程中只有这一个i存在，并非每次循环都会生成新的变量。
• 循环执行时，先给按钮绑定点击事件，随后执行i++。当循环结束时，i已经自增到1（因为aBtn.length为1，i=0满足循环条件，执行绑定后i变为1，此时1<1不成立，循环终止）。
• 点击按钮时才会触发console.log(i)，这时函数会向上查找作用域中的i，找到的是循环结束后已经变成1的全局变量i，因此输出1。

解决方法示例 #

1. 使用let声明i（let具有块级作用域，每次循环会生成独立的i变量）：

var aBtn=document.getElementsByClassName('btn');

let i = 0;

while(i<aBtn.length){
    aBtn[i].onclick = function(){
        console.log(i);
    }            
    i++
}

2. 用立即执行函数创建独立作用域，保存i的当前值：

var aBtn=document.getElementsByClassName('btn');

var i = 0;

while(i<aBtn.length){
    (function(currentIndex){
        aBtn[currentIndex].onclick = function(){
            console.log(currentIndex);
        }
    })(i)
    i++
}

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