javascript - 函数数组和奇怪的行为

Question

我有以下代码：

var arr = [{Name: "foo", action: function(){ alert("foo")}},
       {Name: "bar", action: function(){ alert("bar")}}
      ]

var arr2 = {};

for(var i =0; i< arr.length; i++)
{
    var bla = arr[i];
    arr2[bla.Name] = function(){ bla.action() };
}          

arr2.foo();
arr2.bar();

提醒两次“酒吧”。相反，当我这样做时

    arr2[bla.Name] = bla.action;

这样可行。

任何让它在第一种情况下工作的方法（我需要在我的函数中附加其他东西）

谢谢 ！

Answer 1

这是因为您bla的匿名函数内部是一个引用，并且它在循环内不断更新以指向下一个对象。当循环终止时，它们都将指向您在循环中引用的最后一个元素。

您可以通过执行类似的操作来修复它

arr2[bla.Name] = (function(x) { return function(){ x.action(); }})(bla);

小提琴

Answer 2

的值bla正在发生变化，您创建的函数将始终使用调用时的值。

您可以创建一个闭包来保护bla变量：

for(var i =0; i< arr.length; i++) {
    (function(bla){
        arr2[bla.Name] = function(){ bla.action() };
    })(arr[i]);
}     

如果您的action函数不需要任何上下文或参数，您还可以简化循环

for(var i =0; i< arr.length; i++) {
    var bla = arr[i];
    arr2[bla.Name] = bla.action;
}