JavaScript のクロージャを理解する: 混乱から明確さへ

これを想像してみてください...

あなたはプロジェクトに取り組んでおり、関数の実行が終了した後でも変数の値を「記憶」する関数が必要です。クロージャは魔法のバックパックのようなもので、コード内のどこに行っても、前のレッスンで得た知識を持ち運ぶことができます。これは、JavaScript の中で最も強力であるにもかかわらず誤解されている概念の 1 つです。しかし、心配しないでください。このガイドが終わるまでに、クロージャは頭が痛むような作業から「なるほど!」に変わるでしょう

---

クロージャとは何ですか?簡略化した定義と類推

クロージャとは、外側の関数の実行が終了した後でも、関数が周囲の状態 (スコープ内の変数) を「記憶」することです。これをわかりやすい例えで分析してみましょう:

実生活のアナロジー: 知識のバックパック

あなたが学生だと想像してください。あなたはメモ、ペン、本が入ったバックパックを持っています。教室を出ても（外側の機能）、バックパックの中のものすべてにアクセスできます（閉鎖）。後で問題を解決する必要があるときはいつでも、バックパックに保存した知識を取り出すことができます。

簡易定義

JavaScript では、次の場合にクロージャが発生します。

1. 関数が別の関数内で定義されています。
2. 内部関数は外部関数の変数を「記憶」します。

---

クロージャはどのように機能しますか?実際の例

コード例を使用してクロージャの動作を見てみましょう。

例 1: 基本的なクロージャ

function outerFunction() {
  const outerVariable = 'Hello, Closure!';

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

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "Hello, Closure!"

ここで何が起こっているのですか?

• innerFunction は externalFunction から返されます。
• outerFunction の実行が終了しても、innerFunction はまだ externalVariable を記憶しています。

---

例 2: カウンターの閉鎖

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

ここで何が起こっているのですか?

• createCounter の実行が終了しても、返された関数は count 変数を「記憶」します。
• counter を呼び出すたびに、count の最新の値が更新されて記憶されます。

---

例 3: ループ内のクロージャ (よくある落とし穴)

ループ内でクロージャを使用すると、開発者がつまずくことがよくあります。

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), i * 1000);
}
// Output: 1, 2, 3 (each after 1 second)

なぜこれが機能するのですか?

• let キーワードはブロック スコープを作成するため、各反復には独自の i があります。
• let の代わりに var を使用した場合、var はブロック スコープを作成しないため、すべての出力は 4 になります。

? ドキュメント: MDN の閉鎖

---

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

クロージャーは単なる理論上の概念ではなく、非常に実用的です。ここでは、クロージャが有効な一般的なシナリオをいくつか紹介します。

1.データキャッシュ

クロージャは計算された値を保存して再利用できるため、時間とリソースを節約できます。

function outerFunction() {
  const outerVariable = 'Hello, Closure!';

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

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "Hello, Closure!"

2. イベントハンドラー

クロージャは、状態を維持するためにイベント リスナーでよく使用されます。

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

3. プライベート変数

クロージャを使用してプライベート変数を作成し、機能をカプセル化できます。

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), i * 1000);
}
// Output: 1, 2, 3 (each after 1 second)

---

クロージャが強力な理由

クロージャにより次のことが可能になります:

• 状態を保持: 関数の実行が終了した後でも変数を記憶します。
• 機能のカプセル化: 変数をプライベートかつ安全に保ちます。
• コードを簡素化します: 状態管理にクロージャを使用して、グローバル変数を回避します。

---

結論: クロージャの使用に挑戦してください

クロージャーは、JavaScript におけるスイスアーミーナイフのようなものです。データのキャッシュ、イベントの処理、プライベート変数の作成のいずれの場合でも、クロージャはアプリの状態を管理する強力な方法を提供します。

あなたの課題: 単純なカウンターの構築やキャッシュ メカニズムの作成など、小規模なプロジェクトでクロージャを使用してみてください。コントロール クロージャがどれほど多くの効果をもたらすかに驚かれるでしょう!

---

この記事が気に入っていただけた場合は、私の仕事をサポートすることを検討してください:

• コーヒーを買ってきてください
• メンターシップやキャリアに関するアドバイスの電話を予約する
• Twitter でフォローしてください
• LinkedIn でつながる

以上がJavaScript のクロージャを理解する: 混乱から明確さへの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。