js中的for循环的值，在函数体里调用的问题，谁帮解释下其原因？

Question

<input type="button" id="btn" value="按钮1" /> <input type="button" id="btn" value="按钮2" /> <input type="button" id="btn" value="按钮3" /> <input type="button" id="btn" value="按钮4" /> <script> var btn=document.getElementsByTagName('input'); for(var i=0;i<btn.length;i++){    btn[i].onclick=function(){ alert(i);//输出4 4 4 4 }   }是什么原因造成for循环体输出都是循环后的值

Answer 1

//ES5 的写法
for(var i=0;i<btn.length;i++){
    (function(i){
        btn[i].onclick=function(){
            alert(i);
         }
    })(i);
}


//ES6中可以不这么做，使用let / const 也可以达到块作用域的目的
//ES6的写法
for(let i=0;i<btn.length;i++){
    btn[i].onclick=function(){
      alert(i);
   }
}

Answer 2

i在每次循环迭代的时候改变了值，当你点击的时候alert的i就是最后一次迭代的值。

你可以用闭包来保存i的值