由于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上，异曲同工之妙，都达到了中间值的保存。