JavaScript クロージャの詳細: 字句スコープの力を解き放つ-jsチュートリアル-php.cn

JavaScript クロージャの詳細: 字句スコープの力を解き放つ

Mary-Kate Olsen

リリース： 2024-12-22 17:34:11

オリジナル

479 人が閲覧しました

JavaScript Closures in Depth: Unlocking the Power of Lexical Scope

JavaScript クロージャの詳細: 包括的なガイド

クロージャは、JavaScript の最も基本的で強力な概念の 1 つです。これらにより、関数は、外側の関数が実行された後でも、そのスコープへのアクセスを保持できるようになります。このため、クロージャはプライベート変数の作成、状態の管理、カリー化や部分適用などの高度なパターンの設計に不可欠なツールになります。

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

クロージャは、関数がその字句スコープ外で実行された場合でも、関数がその字句スコープを「記憶」しているときに作成されます。

定義:

クロージャは、外側の関数が戻った後でも、その外側の関数の変数にアクセスできる関数です。

2.クロージャの構文

クロージャは、入れ子になった関数が返されるか、親関数の実行を超えて存続する方法で使用されるたびに作成されます。

function outerFunction() {
  const outerVariable = "I'm an outer variable";

  function innerFunction() {
    console.log(outerVariable); // Access outerVariable
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Output: "I'm an outer variable"

ログイン後にコピー

3.クロージャーの仕組み

クロージャは JavaScript の 字句スコープ を利用します:

語彙スコープ: 関数が宣言されるスコープによって、関数がどの変数にアクセスできるかが決まります。

outerFunction が返されると、その実行コンテキストは破棄されますが、返された innerFunction はクロージャのため、outerVariable へのアクセスを保持します。

4.クロージャの例

a) プライベート変数の作成

function counter() {
  let count = 0; // Private variable

  return {
    increment: function () {
      count++;
      console.log(count);
    },
    decrement: function () {
      count--;
      console.log(count);
    },
  };
}

const myCounter = counter();
myCounter.increment(); // 1
myCounter.increment(); // 2
myCounter.decrement(); // 1

ログイン後にコピー

変数 count には、返されたメソッドを介してのみアクセスできるため、プライバシーが確保されます。

b) 関数ファクトリー

クロージャを使用すると、事前構成された動作を持つ関数を作成できます。

function multiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

ログイン後にコピー

c) 非同期コードでの状態の維持

クロージャは、非同期操作で状態を維持するために一般的に使用されます。

function greetAfterDelay(name) {
  setTimeout(() => {
    console.log(`Hello, ${name}!`);
  }, 2000);
}

greetAfterDelay("Alice");
// Output after 2 seconds: "Hello, Alice!"

ログイン後にコピー

ここでは、クロージャにより、setTimeout コールバックに対して name 変数が確実に保持されます。

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

データの隠蔽とカプセル化

クロージャは、オブジェクト指向プログラミングの重要な概念であるプライベート変数とメソッドを作成します。
コールバック

イベントリスナー、Promise、タイマーを管理するために非同期 JavaScript で広く使用されます。
関数型プログラミング

マップ、フィルター、リデュースなどの高階関数の中核となります。
カレーと部分適用

機能をより小さく再利用可能な単位に分割できるようにします。

6.クロージャとメモリ

クロージャはスコープ内の変数への参照を保持するため、適切に管理しないとメモリリークが発生する可能性があります。

メモリの問題の回避:

不要になったらイベントリスナーを削除します。
大規模なアプリケーションでの長時間のクロージャには注意してください。

7.閉鎖に関する誤解

通説 1: クロージャは複雑である

字句スコープを理解すれば、クロージャは簡単です。

通説 2: 閉鎖によりパフォーマンスが低下する

クロージャはメモリを保持しますが、パフォーマンスへの影響はほとんどの使用例では無視できます。

8.クロージャの利点

カプセル化: 変数を不要なアクセスから保護します。
モジュール性: 再利用可能な独立した機能を促進します。
状態管理: 関数型プログラミングでの状態管理を簡素化します。

9.現実世界の例

a) クロージャによるデバウンス

別の関数が呼び出される頻度を制限する関数。

function outerFunction() {
  const outerVariable = "I'm an outer variable";

  function innerFunction() {
    console.log(outerVariable); // Access outerVariable
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // Output: "I'm an outer variable"

ログイン後にコピー

10.結論

クロージャは JavaScript の多用途機能であり、プライベート変数、コールバック、ステートフル関数などの強力なパターンを可能にします。クロージャがどのように機能するかを理解することで、より堅牢でモジュール式で保守しやすいコードを作成できます。

クロージャをマスターすると、関数型およびイベント駆動型プログラミング言語としての JavaScript の可能性が最大限に発揮されます。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
私のビジネス用メールアドレスまでお気軽にご連絡ください: kaashshorts28@gmail.com.

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