JavaScript クロージャを理解する: 包括的なガイド

JavaScript クロージャを理解する: 包括的なガイド。

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

クロージャは JavaScript の基本的な概念であり、外部関数の実行が終了した後でも、内部関数がその外部 (囲んでいる) 関数の変数とパラメーターにアクセスできます。簡単に言うと、クロージャーを使用すると、関数が別のスコープで実行される場合でも、関数がその外部スコープの変数を「記憶」してアクセスできるようになります。

クロージャの 3 つのスコープ

JavaScript のすべてのクロージャーは 3 つのスコープにアクセスできます:

• 独自のスコープ (関数内で定義された変数)
• 外部関数の変数 (親関数の変数)
• グローバル変数 (アプリケーション全体で使用可能な変数)

語彙スコープ: 財団

基本的な例で字句スコープを理解しましょう:

function init() {
  var name = "Mozilla"; // local variable created by init
  function displayName() {
    // inner function
    console.log(name); // uses variable declared in parent function
  }
  displayName();
}
init();

この例では:

• init() 関数は、ローカル変数名と内部関数 displayName() を作成します
• displayName() は init()
内にのみ存在する内部関数です。
• displayName() には独自のローカル変数がありません
• 字句スコープにより、名前を含む親スコープ内の変数にアクセスできます

実際のクロージャを理解する

クロージャを示す、少し変更されたバージョンを見てみましょう:

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

理解すべき重要なポイント:

• これは前の例と似ていますが、決定的な違いがあります
• 内部関数をすぐに実行する代わりに、それを返します
• makeFunc() の実行が終了しても、myFunc は引き続き name 変数にアクセスできます
• 関数がその字句環境への参照を維持しているため、これが可能です

実践例: ファンクション ファクトリ

クロージャの力を示す、より実践的な例を次に示します。

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2));  // outputs 7
console.log(add10(2)); // outputs 12

何が起こっているのかを詳しく見てみましょう:

• makeAdder は関数ファクトリーです - カスタマイズされた関数を作成します
• 作成される各関数は、makeAdder に渡された x の値を記憶します
• add5 と add10 は両方ともクロージャです:

同じ関数定義を共有します
しかし、それらは異なる語彙環境を持っています
add5 の環境では、x は 5
add10 の環境では、x は 10

クロージャが重要な理由

クロージャは次のことを可能にするため強力です:

1. データプライバシー: クロージャー内の変数はプライベートのままであり、外部からアクセスすることはできません
2. 状態の保存: 関数呼び出し間の状態を維持できます
3. 関数ファクトリー: 事前設定されたパラメーターを使用して特殊な関数を作成できます
4. モジュール パターン: JavaScript のモジュール パターンの基本です

結論

クロージャは最新の JavaScript パターン、フレームワーク、ライブラリで広く使用されているため、JavaScript 開発者にとってクロージャを理解することは非常に重要です。これらは、コードをクリーンで保守しやすく保ちながら、プライベート変数を作成し、関数型プログラミングで状態を維持する方法を提供します。

覚えておいてください: クロージャは、別の関数内の単なる関数ではありません。クロージャは、外側のスコープ内の変数にアクセスでき、外側の関数の実行が終了した後もそのアクセスを維持する関数です。

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