JavaScriptクロージャの説明

JavaScript関数がどのように機能するかを理解するための鍵となる、クロージャのトピックの穏やかな紹介

あなたが書いたことがあるなら関数JavaScriptでは、すでに利用しています閉鎖

それは理解するための重要なトピックであり、それはあなたができることに影響を及ぼします。

関数が実行されると、実行されます定義されたときに配置されていたスコープで、およびないあるときの状態で実行された

スコープは基本的に、表示される変数のセットです。

関数はそのことを覚えています語彙スコープ、および親スコープで定義された変数にアクセスできます。

つまり、関数には、アクセスできる変数の手荷物全体があります。

これを明確にするために、すぐに例を挙げましょう。

const bark = dog => {
  const say = `${dog} barked!`
  ;(() => console.log(say))()
}

bark(Roger)

これはコンソールにログを記録しますRoger barked!、 予想通り。

代わりにアクションを返したい場合はどうなりますか?

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => console.log(say)
}

const bark = prepareBark(Roger)

bark()

このスニペットはコンソールにもログを記録しますRoger barked!

最後に、再利用する例を1つ作成しましょう。prepareBark2匹の異なる犬の場合:

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => {
    console.log(say)
  }
}

const rogerBark = prepareBark(Roger) const sydBark = prepareBark(Syd)

rogerBark() sydBark()

このプリント

Roger barked!
Syd barked!

As you can see, the state of the variable say is linked to the function that’s returned from prepareBark().

Also notice that we redefine a new say variable the second time we call prepareBark(), but that does not affect the state of the first prepareBark() scope.

This is how a closure works: the function that’s returned keeps the original state in its scope.


More js tutorials: