-2

重複の可能性：
forループおよび字句環境でのクロージャ

私はJavaScriptでクロージャを学んでいます...私は単純なコードの例を見ました：

for (var i = 0; i < 10; i++) {
  document.getElementById('box' + i).onclick = function() {
    alert('You clicked on box #' + i);
  };
}

しかし、正確に何が起こるかというと、何divを選択しても、最後のi-最後の反復についてのアラートが表示されます。

内部関数でその問題の解決策を見ましたが、なぜこれが起こるのですか？onclickすべての反復でイベントをバインドしていませんか？

4

2 に答える 2

1

反復ごとに新しい関数が作成されますが、各関数は同じ変数i（メモリ内の場所）を参照します。の値はi、ハンドラーの実行時にのみ評価されます。その瞬間はforループが終了してからずっと後のことであり、その時点でi値はです10。

クロージャに関するウィキペディアの記事は一読の価値があり、クロージャが機能する2つの方法について言及しています。変数の現在の値をバインドするか、変数自体への参照をバインドすることです。後者はJavaScriptの場合です。

于 2012-12-24T05:05:52.413 に答える
0

古き良き同じ変数の問題。iパラメータとして自己呼び出し関数を通過させることで、簡単に回避できます。

for(var i = 0; i < 10; i++) {
    (function(i) {
        document.getElementById('box' + i).onclick = function() {
            alert('You clicked on box #' + i);
        };
    })(i);
}

これが必要で機能する理由iは、通常は常に同じであるためです。JavaScriptには関数スコープしかありません。パラメータとして受け取る自己呼び出し関数を使用することにより、毎回i新しいものを作成し、iそれがコールバック関数のクロージャ内に保存されます。

于 2012-12-24T05:05:02.983 に答える