ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript でのクロージャ

JavaScript でのクロージャ

WBOY
WBOYオリジナル
2024-09-12 10:30:02812ブラウズ

Closures in JavaScript

こんにちは、

この投稿では、クロージャを学びましょう。

クロージャは、親関数が閉じられた後でも、関数がその親スコープから変数にアクセスできるようにするため、JavaScript では不可欠です。これは、コールバック関数や状態の維持など、長期間データを記憶する必要がある関数にとって非常に重要です。ここで覚えておくべき点は、親スコープの未使用の変数はガベージ コレクションされるということです。

定義:
クロージャは、一緒にバンドルされた (囲まれた) 関数とその周囲の状態 (語彙環境) への参照の組み合わせです。言い換えれば、クロージャは関数にその外側のスコープへのアクセスを与えます。 JavaScript では、関数が作成されるたびに、関数の作成時にクロージャーが作成されます。

基本的に、クロージャは以下にアクセスできます:

  • 独自のスコープ
  • 外部関数のスコープ
  • グローバルスコープ

ボーナスポイント
レキシカルスコープ : 内部関数は外部スコープの変数にアクセスできます。

例を挙げて理解しましょう。

質問> createCounter関数を作成します。最初の整数 init を受け入れる必要があります。 3 つの関数を含むオブジェクトを返す必要があります。

3 つの関数は次のとおりです:

increment() は現在の値を 1 増やして返します。
decrement() は現在の値を 1 減らして返します。
reset() は現在の値を init に設定して返します。

init = 5 の例については、以下のコメント付きコードを参照してください。

解決策

var createCounter = function(init) {
    const INITIAL_VALUE = init;
    return {
        increment: () => ++init,
        decrement: () => --init,
        reset: () => init=INITIAL_VALUE,
    }
};

/**
 * const counter = createCounter(5)
 * counter.increment(); // 6
 * counter.reset(); // 5
 * counter.decrement(); // 4
 */

説明:

  • その字句スコープで init 変数をキャプチャします。
  • createCounter の実行が終了した後でも、init にアクセスして変更できるメソッドを返します。
  • 返されたメソッドを介してのみアクセスできるプライベートで永続的な状態 (init) を作成します。
  • それぞれが独自のカプセル化された状態を持つ、複数の独立したカウンターの作成を許可します。

ご質問やご提案がございましたら、お気軽にコメントしてください。

この質問は leetcode から取得したものです。リンク

最後に、グローバルに宣言された変数はスクリプト内のすべてのクロージャからアクセスできることを覚えておいてください。

クロージャについてよく理解していただけたと思います。読んでいただきありがとうございます

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。