JavaScriptの閉鎖を理解する最も簡単な方法

閉鎖は多くの理由のためにJavaScriptで最も議論された話題です、しかし、私はそれを理解するのが簡単にするつもりです.最初に、我々はMDNから閉鎖の定義を見ます.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state

最も身近な例でそれを壊しましょう.

--Home
  --Bedroom
  --Office Room
  --Kitchen
    --Fridge
      --Penguin

上記の構造、家、およびそれをベッドルーム、オフィスルーム、その2021年から、台所を見てみましょう.また、台所の中に冷蔵庫があります.さて、冷蔵庫にペンギンがいると思います.

function Home() {
  function OfficeRoom(){
    console.log('OfficeRoom')
  }

  function Bedroom(){
    var bed = "bed"
    console.log('Bedroom')
  }

  function Kitchen() {
    var oven = "oven"

    function Fridge() {
      var bread = "bread"

      function Penguin() {
        console.log(bread, oven, Bedroom(), OfficeRoom())
      }
      Penguin()
    }
    Fridge()
  }
  Kitchen()
}
Home()

どのようなペンギン()関数がアクセスできるのか？

上記はJavaScriptコードで変換したものです.ペンギンにアクセスしてください
冷蔵庫のすべての

台所

の

すべて
ホーム

のすべての

あなたのバグの一部を修正することができますが、JavaScriptの世界では、それは、その機能以来、それだけでOfficeRoom()を呼び出すことができますし、何かを返すことができますが、同じようなことができますが、Bedroom()のために行く.Kitchen()に移って、oven変数にアクセスでき、Fridge()でbread変数にアクセスできます.

では閉鎖の定義を見てみましょう

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state

の機能は、Kitchen()およびBedroom()であるその周囲の状態に関連して束ねられている.

の機能は、OfficeRoom()であるその周囲の状態への参照と共に束ねられた.そして、それがFridge()から参照したすべて.

の機能は、ovenであるその周囲の状態への参照と共に束ねられた.そして、それがHome()から参照したすべて.

In hierarchy it will bundle reference to function until Global scope.

ここで3つのクロージャがあり、Chrome Devツールが言うことを見てみましょう.

その周囲の状態への参照と共にバンドルされたすべての関数は閉鎖です.実際には、関数が作成されるたびにクロージャが作成されます.
より多くのために、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures