JavaScript でクロージャをマスターする: スコープ、カプセル化、パフォーマンスを理解する

閉鎖

意味

クロージャは、同じスコープ レベル (字句スコープ) で宣言されている他のすべての変数と関数に関数がアクセスできるようにする機能です。

• クロージャは、同じスコープ レベル (字句スコープ) で宣言されている他のすべての変数と関数に関数がアクセスできるようにする機能です。
• クロージャは、関数が別の関数 (外部関数と内部関数) 内で定義されるときに作成されます。内部関数は、外部関数で作成されたすべての変数と関数への内部関数へのアクセスを提供するクロージャを作成します。
• クロージャを使用すると、外部関数が戻った後でも、内部関数は外部関数で宣言された変数にアクセスできます。
• メモリを適切に処理する必要があります。クロージャはメモリ リークとメモリ管理の向上の両方につながる可能性があります。

• JavaScript のクロージャは、プライベート変数を作成して機能をカプセル化できるため、Java のプライベート メソッドと同様の目的を果たします。

  例

  function outerFunction() {
      let outerVariable = 'I am from outer scope';
  
      function innerFunction() {
          console.log(outerVariable); // Accessing outerVariable from the outer scope
      }
  
      return innerFunction; // Return the inner function
  }
  
  const closureFunction = outerFunction(); // Call outerFunction, which returns innerFunction
  closureFunction(); // Outputs: I am from outer scope
  

  • 上記の例では、内部関数が返されるだけであるため、内部関数のみを呼び出しています。たとえ、outerVariable にアクセスできるとしても。
  • 別の最良の例を見てみましょう

      function handleCount() {
      let count = 0;
  
      return {
          increment: () => {
                  count++;
                  return count;
          },
          decrement: () => {
                  count--;
                  return count;
          },
          getCount: () => {
                  return count;
          },
      };
  }
  
  const counter = handleCount();
  console.log(counter.increment()); // Outputs: 1
  console.log(counter.increment()); // Outputs: 2
  console.log(counter.getCount());  // Outputs: 2
  console.log(counter.decrement()); // Outputs: 1
  console.log(counter.getCount());  // Outputs: 1
  

  • これで、increment、decrement、handleCount ではなく getCount を呼び出すたびに、呼び出された関数のみが実行されますが、スコープ外の変数にもアクセスできます。これをクロージャと呼びます。

覚えておくべき重要なポイント

• 定義: クロージャは、関数がそのスコープ外で実行された場合でも、その字句スコープへのアクセスを保持する関数です。
• スコープ チェーン: 関数が別の関数内で定義されるときにクロージャが作成されます。内部関数は、外部関数のスコープを含むクロージャを形成します。
• 変数へのアクセス: クロージャを使用すると、外部関数が戻った後でも、内部関数は外部関数で宣言された変数にアクセスできます。
• プライベート変数: クロージャはプライベート変数の作成によく使用されます。これは、変数をグローバル スコープから非表示にし、クロージャを介してのみアクセスできることを意味します。
• メモリ管理: クロージャは実行に必要な変数のみを保持するため、メモリ効率の向上につながります。
• パフォーマンスに関する考慮事項: クロージャーは強力ですが、適切に管理しないと、特に存続期間の長いオブジェクトやイベント リスナーでメモリ リークが発生する可能性もあります。

ユースケース

• カプセル化: プライベート データまたはメソッドを作成します。
• 関数ファクトリー: プリセットパラメーターを使用して関数を作成します。
• コールバック: 非同期プログラミング用 (イベント ハンドラーや setTimeout など)。
• CSS: レムとエム。 rem はルート要素 (html / body) から派生しますが、em はその近い親から派生します。

面接でよくある質問

• クロージャーとは何ですか?
• クロージャと通常の関数の違いを説明できますか?
• JavaScript でのクロージャーの例を提供します。
• JavaScript におけるクロージャーの使用例は何ですか?
• クロージャはどのようにメモリ リークを引き起こす可能性がありますか?また、それを防ぐにはどうすればよいですか?

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