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的值