クロージャとは一体何ですか?(簡単な JS 定義)

最初の就職面接で面接官にクロージャーの定義を尋ねられたときのことを覚えています。専門用語がわからなかったので大変でした。しかし、心の奥底では、たとえ説明できなくても、それが何を意味するのかは理解できたという気持ちがありました。

面接が終わった後 (ネタバレ: 私は選ばれませんでした)、私は閉店について調べるために急いで Google にアクセスしました。私が最初に出会った用語は、Lexical Scoping = _What?

でした。

心配しないでください。語彙スコープは単純なものを表す単なる派手な用語です。

それでは、段階的に理解していきましょう。

字句スコープの説明

あなたの家のことを考えてください。あなたが寝室にいて、寝室のランプをつけたいと想像してください。現在いる部屋にあるランプのみをオンにすることができます。これは語彙スコープです。現在のコンテキスト内にあるもの (ランプなど) にのみアクセスして変更できます。

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  const turnOffBedroomLamp = () => {
    bedroomLamp = 'off'
  }
}

関数turnOnBedroomLampとturnOffBedroomLampはベッドルームコンテキスト内に存在するため、これらはbedroomLamp変数にアクセスして変更できます。

今、あなたがキッチンにいると想像して、寝室のランプを消してみてください。これは、別のコンテキストにいるため機能しません。また、キッチンは、bedroomLamp 変数にアクセスできません:

const kitchen = () => {
  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on' // You can't do this!!
  }
}

とてもシンプルですよね?

字句スコープとクロージャの関係は何ですか?

では、さらに話を進めましょう。あなたの家に、どの部屋にいても寝室のランプをオンにできるリモコンがあると想像してください。このリモコンは、キッチンにいる場合でも、制御する寝室のランプを「記憶」します。

この「記憶」こそがクロージャなのです!

コードの例は次のとおりです:

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  return turnOnBedroomLamp // Returning the function
}

const remoteControl = bedroom() // Creating the closure
remoteControl() // Using the closure to turn on the bedroom lamp

この例では:

ベッドルーム関数は、ローカル変数 BedroomLamp と関数 TurnOnBedroomLamp を作成します。

turnOnBedroomLamp は、それが作成されたコンテキスト (寝室機能) を記憶します。

remoteControl (返された関数) を呼び出すと、ベッドルーム関数の外にいるにもかかわらず、ベッドルームランプ変数にアクセスできます。

わかりますか?これは非常にシンプルなアイデアで、JavaScript が物事を記憶しているだけなので、さまざまな場所でさまざまな方法で使用できます。

ここで実際のコードのコンテキストで考えて、日常でクロージャをどのように使用できるかを見てみましょう。以下のコードは、製品値に割引を追加する関数を作成します。

const createDiscount = (discount) => {
  return (price) => price - price * discount
}

const tenPercentOff = createDiscount(0.1) // 10% off
const twentyPercentOff = createDiscount(0.2) // 20% off

// Using discount functions
console.log(tenPercentOff(100)) // returns 90
console.log(twentyPercentOff(200)) // returns 160

これで、クロージャについて認識し、面接でその定義を尋ねられたときに備えられました。詳細については、参考セクションを確認してください。

参考文献

閉鎖 - MDN ウェブ ドック

JavaScript でのクロージャ - GeeksForGeeks

以上がクロージャとは一体何ですか?(簡単な JS 定義)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。