函数数组和奇怪的行为

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;
}