for循环的问题


#1
`<div>
    <button class="btn">btn0</button>
    <button class="btn">btn1</button>
    <button class="btn">btn2</button>
    <button class="btn">btn3</button>
    <button class="btn">btn4</button>
</div>`

`
var btns = document.getElementsByClassName('btn');
for (var i = 0; i < btns.length; i++) {
     btns[i].onclick = function () {
          console.log(i);
     };
}
`

我想让console.log()每次都不一样,1.2.3…这样子的,为啥结果都是5啊


#2

这是一个典型的闭包问题。
var声明的循环变量i不仅存在于for循环中,还存在于当前代码所在函数环境。这导致了,当绑定完毕最后调用的时候,使用的是同一个变量i,i在循环结束后的值是5.
建议使用es6的新语法let 声明i, let可以使每一轮循环,在内存中生成一个不同的i,即最后内存中一共有6个i. 使用var声明的i在内存中只存在一份
具体可以参考文档:
let ------MDN