なぜこのコードは匿名関数を使用して動作していません

Question

私はアンカーオブジェクトにハンドラを追加するために匿名関数を使用しようとしています。

私はこのコードを実行しますが、うまくいかない理由を説明して修正することはできますか？ありがとう：

var obj = document.getElementsByTagName("a"); 
var items = ["mouseover", "mouseout"]; 
for (var i = 0; i < items.length; i++) { 
    (function() { 
     var item = items[i]; 
     for (var i = 0; i < obj.length; i++) { 
      obj[i]["on" + item] = function() { 
       alert("thanks for your " + item); 
      };  
     } 
    })();    
} 

Answer 1

は "ホイスト"です。言い換えれば、あなたの関数は、として実行されている：items[i]でそう

var i; 
var item; // vars are hoisted to the beginning 

item = items[i]; 
for (i = 0; i < obj.length; i++) { 
    obj[i]["on" + item] = function() { 
     alert("thanks for your " + item); 
    };  
} 

iは外側iに言及されていません。代わりに、iはundefinedです。別の変数名を使用する必要があります。 j内側のforループ：

for (j = 0; j < obj.length; j++) { 

第二に、itemは警告が毎回同じ値を使用しますので、変更されます。これを回避するには、無名関数を使用することができますが、それらのポイントは、それが「フリーズ」するように値を渡すことです：

var obj = document.getElementsByTagName("a"); 
var items = ["mouseover", "mouseout"]; 
for (var i = 0; i < items.length; i++) { 
    var item = items[i]; 

    (function(item) { 
     for (var j = 0; j < obj.length; j++) { 
      obj[j]["on" + item] = function() { 
       alert("thanks for your " + item); 
      };  
     } 
    })(item);    
} 

Answer 2

理由は、それが割り当てられている前に、変数を使用していることです値：

var item = items[i]; 

変数iは、次の行にsurrondingスコープからではない変数を宣言されたローカル変数です。変数は関数スコープを持っているので、変数が次の行で宣言されても、関数全体に存在します。

周囲のスコープから変数にアクセスできるようにするには、関数の変数に別の名前を使用する必要があります。歴史的な理由から、ループ変数は通常、必要に応じてi、j、kという名前になります。

var obj = document.getElementsByTagName("a"); 
var items = ["mouseover", "mouseout"]; 
for (var i = 0; i < items.length; i++) { 
    (function() { 
    var item = items[i]; 
    for (var j = 0; j < obj.length; j++) { 
     obj[j]["on" + item] = function() { 
     alert("thanks for your " + item); 
     }; 
    } 
    })();    
}