JS での for ループ クロージャーの問題を解決する方法

この記事では、JS の for ループ クロージャの問題を解決する 2 つの方法を紹介します。お役に立てれば幸いです。

このようなコードスニペットでは、初心者は、Li を順番にクリックすると、対応する 0、1、2、3、4、5 がポップアップ表示されることを当然だと思いますが、実際の結果は次のようになります

どのボタンをクリックしても、最後に表示されるのは 6 です。これは古典的な for ループ クロージャの問題です。

それでは、まずクロージャとは何かを理解しましょう。Baidu Encyclopedia では次のように説明されています。クロージャとは、自由な (特定のオブジェクトにバインドされていない) 変数を含むことができるコードのブロックであり、これらの変数はこのコード ブロック内に存在しません。は任意のグローバル コンテキストで定義されますが、コード ブロックが定義されている環境 (ローカル変数) で定義されます。 「クロージャ」という言葉は、実行されるコードのブロック (自由変数がブロック内に含まれるため、これらの自由変数とそれらが参照するオブジェクトは解放されません) と自由変数に提供されるバインディングの組み合わせに由来します。コンピューティング環境 (範囲)。さまざまな程度のクロージャのサポートは、Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、Python、Lua、objective c、Java (Java8 以降) などの言語で見られます。私の単純な理解は、関数が別の関数内にネストされており、内部の 1 つの関数が外側の関数の変数にアクセスする必要があるため、クロージャが形成され、値として特定のローカル変数が存在します。

ただし、JavaScript には上記の例のような一般的なクロージャーの問題がいくつかあるため、これらの問題を解決する方法を見てみましょう。

解決策 1: クロージャーのレイヤーを追加し、 i が関数パラメーターの形式で内部関数に渡されます。

その結果、対応する li をクリックすると、対応する番号がポップアップ表示されます。 3 番目の li をクリックすると、次の効果が表示されます。 効果:

解決策 2: i 値を保存する属性を見つけて、値をポップアップします。

3 番目の li をクリックすると、次の効果が表示されます。 :

関連する推奨事項:

JavaScript forループif判定文の詳細説明

for-inループと配列の使用法を横断するforループ

JavaScriptでforループを使用する際の注意点

以上がJS での for ループ クロージャーの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。