点击监听的回调函数的小问题

今天听网课的时候发现一个小问题，代码如下：

<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br> 

for(var i = 0;i<btns.length;i++){
           /* btns[i].onclick = function () {
                alert(i);
            }
}

当点击三个按钮时，弹出的i值都为3。这是为啥呢，我们想要的是0,1,2，而不是都是3。其实主要是因为ES5没有块级作用域，只有函数作用域和全局作用域，所以for中的i可以看做是全局变量。点击监听事件最后执行需要调用回调函数,回调函数在主体函数执行完执行,即for循环每循环一次给相应的button添加一次点击事件，但是并没有触发该事件，等循环执行完毕，点击按钮之后开始执行点击事件，所以最后alert中的i值都为3。

解决办法：

* 1.立即执行函数：每执行一次，传入的实参i作为立即执行函数作用域中的一个变量

for(var i = 0;i<btns.length;i++){
            (function(i){
              btns[i].onclick = function () {
                alert(i);
              }
            })(i)
}

* 2.ES6的let定义for循环中变量i：let有自己的块级作用域，for每执行一次都在自己的块级作用域里

for(let i = 0;i<btns.length;i++){
           /* btns[i].onclick = function () {
                alert(i);
            }
}

希望小小的发现对将来迷惑的你有点小小帮助！