javascript - オブジェクト関数ループはJavaScriptをオーバーライドしますか?

Question

私は次のコードについて非常に混乱しています:

 var x =[ {name : 'name1' , value : 15 },{name :'name2' , value: 60} ];
 var y = [[1,2,3] , [4,5,6]] ; 
     for(var t in y){
         x[t].myFun = function(){console.log(y[t])} ;
      }
 console.log(x[0].myFun()) ; 

このコードは、yなぜ 2 番目の配列を返すのか、最初の配列を返すべきではありませんか?

ここにjsFiddleがあります

Answer 1

myFun関数はすべて同じ( tおよびy) 変数を参照します。したがって、ループの後tは is1であるため、常に 2 番目の値が返されます。

クロージャーを使用して値を「閉じる」必要があります (また、for..in配列には使用しないでください)。

var x = [{name : 'name1' , value : 15 }, {name :'name2' , value: 60}];
var y = [[1,2,3] , [4,5,6]]; 
for(var t = 0, len = y.length; t < len; t++){
    (function(t){
        x[t].myFun = function(){console.log(y[t])};
    })(t);
}

console.log(x[0].myFun()); 

Answer 2

JQueryを使用しているため、クロージャーを作成するときにインデックスの現在の値を具体的にキャプチャすることを心配することなく、配列を反復処理する簡単な方法があります。それは$.each：

var x =[ {name : 'name1' , value : 15 },{name :'name2' , value: 60} ];
var y = [[1,2,3] , [4,5,6]] ; 
$.each(y, function(i,v)
{
    x[i].myFun = function(){console.log(y[i])} ;
});