函數數組和奇怪的行為

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