javascript - 如何控制变量提升？

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 10 年前。

我在将函数从数组绑定(bind)到某些元素时遇到问题，但在单击任何具有“class”类的元素后出现此错误。

Uncaught TypeError: Property '4' of object function (){alert(1)},function (){alert(2)},function (){alert(3)},function (){alert(4)} is not a function

var c = [
    function(){alert(1)},
    function(){alert(2)},
    function(){alert(3)},
    function(){alert(4)}
];

function test(b){
    for(var i = 0; i < b.length; i++){
        $('.class').eq(i).bind('click', function(){
            b[i]();
        });
    }
}

test(c);

我认为变量保留了其最后的值。

任何解决方案或解释将不胜感激。提前致谢。

Answer 1

你需要一个闭包 - 在 js 中变量范围是由函数决定的。对于 jQuery，只需使用 .each:

$('.class').each(function(i) {
     $(this).on('click', function(){
         alert(i+1);
     });
});

但是，如果您确实需要一组不同的函数，您只需将函数本身直接绑定(bind)为处理程序即可:

var elems = $('.class');
for (var i=0;i<b.length;i++) {
    elems.eq(i).on('click', b[i]);
}