JavaScriptでループ内に関数を作成することをお勧めしないのはなぜですか？

Question

私は絶対初心者です、そして、私はちょうどこれをで読んでいますJavaScript：良い部品。

スコープについて説明している章では、「」と記載されています。の問題を回避するために、内部関数は外部関数の実際の変数にアクセスできます。そして、次の2つの例は、次のようになります。

//悪い例

var add_the_handlers = function (nodes) { 
    var i; 
    for (i = 0; i < nodes.length; i += 1) { 
     nodes[i].onclick = function (e) { 
      alert(i); 
     }; 
    } 
}; 

// END悪い例

var add_the_handlers = function (nodes) { 
    var helper = function (i) { 
     return function (e) { 
      alert(i); 
     }; 
    }; 
    var i; 
    for (i = 0; i < nodes.length; i += 1) { 
     modes[i].onclick = helper(i); 
    } 
}; 

著者によると、それはdoesnのため、2番目の例が優れています関数内でループを使用しないと、計算上無駄になる可能性があります。しかし、私は喪失しており、彼らと何をするべきか分かりません。彼の理論を実際の応用にどのように置くのですか？誰もがHTMLを組み合わせたこれら2つの例を説明できますか？

Answer 1

この例では、多くのイベントハンドラが作成されています。イベントごとに1つ。良い例は、単一のイベントハンドラを作成し、それをすべてのイベントに割り当てます。

悪い例では、1つではなく、たくさんの別々の関数を作成しています。これは余分なオーバーヘッドと多くの潜在的なスコープの問題になる可能性があります。これには、ループ内の最後のアイテムのイベントだけを起動するなどのクロージャの問題が含まれます。

また、元の関数ポインタにアクセスできるため、良い例ではイベントをより簡単に購読解除できます。

良い例は、読んで理解しやすいだけです。ループは、要素の作成とイベントのバインドにのみ使用されます。これらのイベントの処理は他の場所で行われます。

Answer 2

問題は閉鎖です。内部関数は、これらの関数の外で定義された変数iにアクセスできます。ループのすべての反復が実行された後、変数iはnodes.lengthの値を保持します。したがって、nodes[0]をクリックすると、警告はnodes.lengthと表示されますが、それはあなたが期待するものではありません。 （あなたは0という警告を期待します）nodes[1]、nodes[2]などをクリックすると同じことが言えます。すべての警告はnodes.lengthと表示されます。

Answer 3

Soviutが言及しているように、悪い例では多くのイベントハンドラを作成しています。さらに、悪い例題の関数が同じi変数を参照していることを指摘することは重要です。つまり、実行時にすべての変数の最後の値がnodes.lengthになります。

これは、クロージャが作成されたためです。詳細はClosuresにあります。

Answer 4

まず、悪い例では、イベントハンドラごとに関数が作成されます。ループは複数の関数オブジェクトを作成します。 2番目の例では、ループ内から単一の関数が作成され、参照されています。だから、たくさんのメモリを節約できます。

第2に、悪い例では、 "i"の値が実行されるので、関数は値を保持せず、実行時に常に "i"の最後の値を返します。しかし、良い例では、 "i"が関数に渡されるので、この値は関数のレキシカル環境として保持され、呼び出されると正しい値が返されます。

第3に、@Gary Hayesが述べたように、私たちは他の場所でもこの関数を使いたいかもしれません。だから、それをループから独立させておくのが最善です。

Answer 5

ここではHTMLで確認できます：https://jsfiddle.net/vdrr4519/。

'multifunc'要素は、多くの関数 'singlefunc'を使用して1つの例で挿入されています。クラスですべての要素を取り出し、それらを関数に渡します。

multifunc(document.querySelectorAll('.multifunc')); 

'for'ループを実行し、 'クリック'イベントリスナーを追加します。したがって、要素はクリック時にインデックスを警告する必要があります（0から始まります）。しかし、多くの関数を持つ例では、誤った値が生成されます（クロージャのために、他の回答も問題を強調します）。

私は、単一機能/複数の機能の問題ではないことも言わなければならないと思います。それはクロージャーを使用することの問題です。あなたは、私は多くの閉鎖を伴う実例を実装することができます：https://jsfiddle.net/pr7gqtdr/1/。私は基本的には単機能のハンドラで行うのと同じことを行うが、すべての時間は、新しい「ヘルパー」関数を呼び出します。最後に

nodes[i].onclick = function (i) { 
    return function (e) { 
     alert(i); 
    }; 
}(i); 

を参照してください、この(i)は即時関数呼び出しなので、onclickが取得しますクロージャ内で変数iが設定された関数。

しかし、単一の関数のオプションは、よりメモリ効率が良いので少し良くなります。関数はオブジェクトです。それらの多くを作成する場合は、一般的により多くのメモリを使用します。だから、これらから選んで、私は 'ハンドラ'機能のオプションに固執したいと思います。