JavaScript クロージャを理解する: 変数、関数、スコープ。-jsチュートリアル-php.cn

「JavaScript クロージャーはプログラミングにおける基本的な概念であり、関数が周囲のスコープから変数にアクセスして操作できるようにします。この強力な技術により、データのカプセル化、コンテキストの保存、効率的なメモリ管理が可能になります。 Javascript クロージャを理解することは、堅牢でスケーラブルで保守可能なアプリケーションを開発するために重要です。この記事では、この重要な Javascript の概念を習得するために変数、関数、スコープを調べながら、この概念の複雑さを調べます。」
ここで、JavaScript におけるクロージャが何であるかを見てみましょう。これを 3 つの方法で定義したいと思います。簡単で簡潔な方法、技術的で詳細な定義、概念的で類似した定義です。

JavaScriptのクロージャとは何ですか?

「クロージャは、外部関数が戻った場合でも、別の関数内の関数がそれ自体のスコープとその外部関数のスコープにアクセスできるチャネルです。」

「クロージャは、周囲の字句スコープへの参照を維持する自己完結型関数とも呼ばれ、関数が元のコンテキストの外で呼び出された場合でも、そのスコープから変数にアクセスして操作できるようになります。」 .

「クロージャは記憶のある部屋のようなものです。関数が別の関数内で作成されると、部屋がその関数が存在する建物の機能を継承するのと同じように、その関数は外側の関数のスコープを継承します。外側の関数が「閉じた」(戻った) 場合でも、内側の関数は外側のスコープを記憶しているため、これらの定義は、JavaScript クロージャのさまざまな側面を強調しています。

定義を強調するため、または主題をより深く理解するために、次のようなクロージャを考えてください。お気に入りのおもちゃをすべて保管するおもちゃ箱コンテナがあると想像してください (おもちゃ箱コンテナは私たちの外側の機能です)。次に、おもちゃのコンテナ (外部機能) の中に、車、人形、ロボットなどのさまざまなおもちゃがあると想像してください。 (これらは変数またはその他の関数です) これらのおもちゃの中から、ロボットという特別なおもちゃ (内部関数) があります。ロボットがチャンネルを通じて特別な力を持っていると想像してください。おもちゃ箱が閉じているときでも、おもちゃ箱内の他のすべてのおもちゃを遊んだり、接続したりできます。その特別なチャネルまたは力が閉鎖されることを想像してください。それを理解していただければ幸いです。クロージャを説明するコードの例を見てみましょう。

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

ログイン後にコピー

上記のコードでは、displayDetails は関数またはクロージャ、あるいはコードの前の図を参照するとさらに良いでしょう。関数 displayDetails は、クロージャーの力を使用して、スコープ外の変数にアクセスします。ここが問題です。 displayDetails は詳細内で定義され、外側のスコープから surName と lastName にアクセスし、スコープ外でもこのアクセスを保持します。または、別の方法では、details は surName と lastName を使用してスコープを作成し、displayDetails はこのスコープにアクセスし、displayDetail は surName と lastName を使用して文字列を返し、details は displayDetails の結果を返します。 console.log(詳細()); displayDetails を呼び出し、外側のスコープ変数にアクセスします。
このコードの出力は次のようになります。ジョン・マーシー、あなたは登録されました
結果を以下に示します

Understanding JavaScript closures: variables, functions, and scope.

クロージャについて理解したところで、JavaScript コード記述におけるクロージャの利点を見てみましょう。

クロージャ内の変数

ローカル変数: 関数内で宣言された変数。関数のスコープ内でのみアクセス可能で、スコープ外からはアクセスできません。
外部変数: 外部関数で宣言された変数は、内部関数
グローバル変数: すべての関数の外側で宣言され、どこからでもアクセスできる変数

クロージャー内の関数

内部関数: これらは、外部スコープにアクセスできる別の関数内で定義された関数です
外部関数: この関数は内部関数
関数式: 式として定義された関数はクロージャとして使用できます

クロージャ内のスコープ

字句スコープ: 内部関数は外部スコープにアクセスできます。
動的スコープ: スコープは実行時に決定されます (JavaScript では使用されません)。

閉鎖のメリットは何ですか？

データ隠蔽: 外部アクセスからデータを保護以下のコードで、このデータ隠蔽を示すコードの例を見てみましょう。

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

ログイン後にコピー

上記のコードでは、関数 person は 2 つの引数、名前と年齢を受け取ります。この関数は新しい人物オブジェクトを作成します。関数内では、privateName と privateAge という 2 つのプライベート変数が宣言されています。これらの変数には、person 関数に渡される値 (名前と年齢) が割り当てられます。これらの変数は let で宣言されており、Person 関数の外部から直接アクセスできないため、プライベートです。戻りオブジェクトも 3 つのメソッドで作成されます。これら 3 つのメソッドにより、プライベート変数へのアクセスが制御されます。したがって、 Person 関数はクロージャを作成し、返されたオブジェクトがプライベート変数にアクセスできるようにします。また、プライベート変数は外部アクセスから隠蔽され、データ保護を提供します。

カプセル化: データとメソッドのバンドル
コンテキストの保持: 非同期呼び出しでコンテキストを保持します。

クロージャの一般的な使用例

イベントリスナーまたはイベント処理: イベントコンテキストを保持します。これは簡単なイベント処理コードです

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

ログイン後にコピー

コード内で起こったことは次のとおりです。別の関数を返す関数 createClickCounter を定義します。 createClickCounter 内で、0 に初期化された変数 clickCounter を宣言します。
返された関数は clickCounter をインクリメントし、clickCounterElement のテキストコンテンツを更新します。 createClickCounter() を呼び出してクロージャを作成し、それをカウンタ変数に割り当てます。 addEventListener を使用して、ボタンのクリックイベントにカウンター関数を付加します。

カウンター関数は、独自のスコープにアクセスでき、外部関数のスコープ (createClickCounter()) にアクセスでき、関数呼び出し間で clickCounter の状態を保持するため、クロージャーです。

コールバック関数: 非同期呼び出しでコンテキストを保持します。
プライベートモジュール: プライベート変数と関数の作成

結論

JavaScript クロージャーを使用すると、開発者は効率的でモジュール化された安全なコードを作成できます。変数、関数、スコープをマスターすることで、開発者はクロージャの可能性を最大限に活用できます。クロージャにより、データのカプセル化、状態の保存、プライベート変数が可能になり、コードの品質と保守性が向上します。この基本的な理解があれば、開発者は自信を持って Javascript の複雑な課題に取り組むことができます。クロージャを効果的に使用することは、スケーラブルで堅牢かつ効率的な JavaScript アプリケーションにとって不可欠です。

以上がJavaScript クロージャを理解する: 変数、関数、スコープ。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。