由于js词法性质和全局变量被更改，循环绑定的click事件执行时变量和定义时 不一致的bug，各种解决方案。

由于js词法性质和全局变量被更改，循环绑定的click事件执行时变量和定义时 不一致的bug，各种解决方案。

动态在页面上添加了5个按钮，实现的功能应该是点击对应按钮在控制台输出相应的索引。但因为应该是i的变量应该一直指引的对应的地址，所以一直输出的是5.就是想请教您一下，这种问题应该是怎么样的一个解决思路。您要是有时间的时候帮我看下。非常感谢！

问题：

 //这个有bug，一直输出5
 for (var i =0 ; i<5 ; i++){
 var btn = document.createElement("button");
 btn.appendChild(document.createTextNode("Button"+i));
 btn.addEventListener("click",function(){
 console.log(i);
 });
 document.body.appendChild(btn);
 }

错误解法一：

（虽然定义了新变量 ，避免了使用全局的i，但是，新变量一直被重新定义，最终定义为和最新的i保持一样了 ）

     for (var i =0 ; i<5 ; i++){
     var btn = document.createElement("button");
     btn.appendChild(document.createTextNode("Button"+i));var j=i;
     btn.addEventListener("click",function(){
         console.log(j);
     });
     document.body.appendChild(btn);
 }

 //一直输出4

错误解法二：

（所谓闭包）

 for (var i =0 ; i<5 ; i++){
     var btn = document.createElement("button");
     btn.appendChild(document.createTextNode("Button"+i));
     btn.addEventListener("click",function(){
         var result = function (num){
             return function(){
                 return num;
             }
         }(i);
         console.log(result);
     }
     );
     document.body.appendChild(btn);
 }

解决方法一：

 for (var i =0 ; i<5 ; i++){
     var btn = document.createElement("button");
     btn.appendChild(document.createTextNode("Button"+i));
         btn.id="btn_"+i;
     btn.addEventListener("click",function(){
         console.log(this.id.split("_")[1]);
     });
     document.body.appendChild(btn);
 }

解决方法二：

     for (var i =0 ; i<5 ; i++){
     var btn = document.createElement("button");
     !function(i){
     btn.appendChild(document.createTextNode("Button"+i));
     btn.addEventListener("click",function(){
         console.log(i);
     });
 }(i);
     document.body.appendChild(btn);
 }

 1     for (var i =0 ; i<5 ; i++){
 2     var btn = document.createElement("button");
 3     (function(i){
 4     btn.appendChild(document.createTextNode("Button"+i));
 5     btn.addEventListener("click",function(){
 6         console.log(i);
 7     });
 8 })(i);
 9     document.body.appendChild(btn);
10 }

 总结：

 两种闭包方案，为何一个错，一个对？

 虽然都是闭包，但是你的没有把需要的东西给关闭进去，因为你的范围太小，你关时，人家已经是5 了。

 

两种正确做法有何区别？

而他们的写法是，在没成5时，就关闭进去，这样就保护了变量的中间值，他们存在闭包内，而另一种存在dom上，异曲同工之妙，都达到了中间值的保存。