JavaScript でのクロージャ

Mar 07 2023
JavaScript では、関数は特定のタスクを実行するように設計されたコードのブロックです。呼び出すと実行されます。
JavaScript でのクロージャ

JavaScript では、関数は特定のタスクを実行するように設計されたコードのブロックです。呼び出すと実行されます。

例えば:

function myFunction(message){
  console.log(message)
}

myFunction("Hello there!!")

myFunction("Welcome, boss")

しかし、最初または前回の実行で何が起こったのかを知りたい場合はどうすればよいでしょうか。そこでクロージャが登場します。

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

簡単に言うと、関数が別の関数を返し、その外部関数にアクセスできるスコープは、JavaScript ではクロージャと呼ばれます。

例えば:

function outer (){
  let counter = 0;
  function inner (){
    counter++;
    return counter;
  }
  return inner
}


const result = outer()

function inner (){
  counter++;
  return counter;
}

そのため、どういうわけか JavaScript は前のcounter値を記憶し、数学的な演算を行っています。
Js はどうやってそれをやっているのかと疑問に思うかもしれません。

関数が関数を返すとき、関数だけを返すのではなく、その関数の字句スコープも返します。これらすべての変数、返された関数に関連するデータは、その返された関数とともに、その返された関数の隠しプロパティとして含まれます。その隠されたプロパティは、Backpack

このバックパックには多くの名前があります。

  • 「変動する環境」(COVE)をめぐる閉鎖
  • 永続的語彙スコープ参照データ (PLSRD)
  • バックパック
  • 閉鎖

別の例を見てみましょう。

function outer (){
  let counter = 0;
  function inner (){
    counter++;
    return counter;
  }
  return inner
}

const result = outer()

result() // 1
result() // 2

const anotherResult = outer()
anotherResult() // 1
anotherResult() // 2


閉鎖する理由:

  • これは、 onceやmemoizeなどの強力な機能を可能にするヘルパー関数の作成に役立ちます。
  • 字句スコープとクロージャを使用してイテレータとジェネレータを作成するのに役立ちます。
  • モジュール パターンを含む多くの JavaScript 設計パターンは、グローバル名前空間を汚染することなくアプリケーションの状態を保持することにより、クロージャを使用します。
  • コールバックとプロミスは、クロージャに依存して非同期 JavaScript の世界で状態を保持します。