javascript - 创建时将点击处理程序与范围内的变量绑定(bind)？

Question

我想在 jQuery 中动态创建一个项目列表，并为每个项目动态绑定(bind)一个点击处理程序，创建点击处理程序时变量在范围内。

下面的代码创建了一个包含 1-6 项的列表，但点击处理程序似乎只与最后一项的值绑定(bind) - 警报始终显示 6。

这是 JavaScript 作用域问题吗？如何将警报与 1-6 的变量绑定(bind)？

HTML:

<ul id="saved-list">
</ul>

JS:

var all_cookies = [1,2,3,4,5,6];
for (var i = 0; i < all_cookies.length; i++) {
    var route_num = all_cookies[i]; 
    var list_item = "<li><a href='#saved-route'>";
    list_item += "<p>" + route_num + "</p></a></li>";
    var newLi = $(list_item);
    newLi.bind('click', function(){
        alert(route_num);
    });
    $('#saved-list').append(newLi);      
}   

在这里查看 jsFiddle:http://jsfiddle.net/n6FU5/

Answer 1

这是“作用域”和“大括号”之间的经典 JavaScript 混淆。事实证明，大括号与 JavaScript 中的作用域关系不大。作用域仅来自函数。

这样做的一个结果是变量总是被提升到作用域的顶部，即最近的函数。所以你的代码完全等同于:

var all_cookies = [1,2,3,4,5,6];
var i;
var route_num;
var list_item;
var newLi;

for (i = 0; i < all_cookies.length; i++) {
    route_num = all_cookies[i]; 
    list_item = "<li><a href='#saved-route'>";
    list_item += "<p>" + route_num + "</p></a></li>";
    newLi = $(list_item);
    newLi.bind('click', function(){
        alert(route_num);
    });
    $('#saved-list').append(newLi);      
}   

考虑到这一点，您可以看到，由于 route_num 每次循环都是相同的变量，因此在循环结束后其值设置为 6 ，以后无论何时调用点击处理程序，您都会看到 6。

解决这个问题的一种方法是将循环的内容包装在一个自执行的匿名函数中:

var all_cookies = [1,2,3,4,5,6];
for (var i = 0; i < all_cookies.length; i++) {
    (function () { 
        var route_num = all_cookies[i]; 
        var list_item = "<li><a href='#saved-route'>";
        list_item += "<p>" + route_num + "</p></a></li>";
        var newLi = $(list_item);
        newLi.bind('click', function(){
            alert(route_num);
        });
        $('#saved-list').append(newLi);      
    }());
} 

这样，当变量被提升时，它们只会被提升到内部自执行函数的顶部，因此每次循环运行时都会有它们的不同实例。