ループ内のクロージャは変数の共有をどのように処理し、一意性を維持するのでしょうか?

ループ内のクロージャに関する誤解を暴く

プログラミングの分野では、クロージャはスコープ内であっても変数への参照を維持できるため、大きな注目を集めています。ループの。ただし、その概念を理解するのは困難な場合があります。簡略化されたコード例を使用して詳細な説明を掘り下げ、包括的な理解を深めましょう。

次のコード スニペットを考えてみましょう:

<code class="javascript">function addLinks() {
    for (var i = 0, link; i < 5; i++) {

        link = document.createElement("a");
        link.innerHTML = "Link " + i;


        link.onclick = function (num) {
            return function () {
                alert(num);
            };
        }(i);
        document.body.appendChild(link);

    }
}
window.onload = addLinks;</code>

生じる問題は、このコードをどのように要約するかです。クロージャの本質を維持しながら。これに対処するために、「ファンクション ファクトリ」アプローチを採用します。

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = (function (x) {
        return function () {
            alert(x);
        }
    })(i);
}</code>

または、読みやすさを向上させるために:

<code class="javascript">function generateMyHandler(x) {
    return function () {
        alert(x);
    }
}

for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = generateMyHandler(i);
}</code>

クロージャの役割を明らかにします:

理解すべき重要な側面は、クロージャの独特の性質です。これらは変数の値を取得するだけでなく、変数自体も含みます。これを説明するには、次のコードを考えてみましょう:

<code class="javascript">var message = 'Hello!';
document.getElementById('foo').onclick = function () { alert(message) };
message = 'Goodbye!';</code>

要素「foo」をクリックすると、「Goodbye!」というメッセージを表示するアラート ボックスがトリガーされます。これは、クロージャが変数の値だけでなく変数を保持するためです。

ループのコンテキストでは、単純なクロージャを採用すると変数の共有が行われます。次のコードはこれを示しています。

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById('something' + i).onclick = function () { alert(i) };
}</code>

すべての関数が同じ変数を共有するため、いずれかの要素をクリックすると、番号 10 のアラートが表示されます。 i = "hello"; のように i を変更しても、すべての要素に同じアラート「hello」が表示されます。これは、変数への共有参照が原因です。

関数の引数の力:

この変数の共有を軽減するために、JavaScript の関数引数の機能を活用します。 。関数が呼び出されるとき、引数は参照によって (オブジェクトの場合)、または値によって (文字列と数値の場合) 渡されます。これにより、クロージャ内での変数の共有を解除できます。

改訂されたコード スニペットでは、

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick =
        (function (x) {
            return function () {
                alert(x);
            }
        })(i)
}</code>

必要な関数参照を生成するファクトリ関数を導入します。この参照は、関数に渡される引数 (この場合は i の値) をキャプチャし、それをクロージャ内で維持して、各要素が一意の値を保持することを保証します。

以上がループ内のクロージャは変数の共有をどのように処理し、一意性を維持するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。