JS のクロージャをわかりやすくする

• 言語の複雑な詳細を理解するには習得する必要があります。
• 配列や関数を作成するようには作成されません。
• LHS 変数内に格納されている別の fn を返す fn。

const secureBooking = function(){
  let passengerCount = 0;
  return function(){
    passengerCount++;
    console.log(`${passengerCount} passengers`);
  }
}

const booker = secureBooking();

booker();
booker();
booker();

• secureBooking fn はグローバル スコープで実行されます。
• 新しい実行コンテキストがグローバル実行コンテキスト上に作成されます。
• すべての実行コンテキスト (EC) には、すべての変数を含む独自の変数環境があります。この EC 内では「letpassengerCount = 0」が定義されています。 親スコープのすべての変数にアクセスできます。
• 新しい fn が返され、booker に保存されます。
• グローバル EC にはブッカー変数も含まれます。
• 現在、secureBooking() は EC から削除され、消滅します。 secureBooking EC 環境はアクティブではなくなりました。ただし、fn の作成時に定義された旅客カウント変数には依然としてアクセスされています。
• それでも、内側の fn は外側の fn 内で定義された旅客カウント変数にアクセスできます。これは閉鎖により発生します。
• クロージャにより、fn は、fn またはその EC の発生場所の周囲で定義された変数を記憶します。
• booker は fn ではなく、グローバル スコープにあります。
• booker() を実行中です。初めて、独自の変数を使用してコールスタック上に EC を作成します。
• fn は、fn が作成された実行コンテキストの変数環境にアクセスできます。安全な予約。したがって、予約者は secureBooking fn の変数環境で定義された変数にアクセスできるようになります。 fn の発生元、つまり定義を周囲の変数環境に接続するこの接続は、fn を含む secureBooking fn の EC がコール スタックから飛び出した後でも、クロージャと呼ばれます。
• クロージャ: fn が作成されたときと場所とまったく同じ、fn に付加された変数環境。
• スコープ チェーンはクロージャを通じて保持されます。EC がなくなっても、可変環境は何らかの形でエンジン内に存在し続けます。したがって、ここでは持っていない親 fn 引数を含めて、ブッカー fn は親 fn に対して閉じられていると言います。
• クロージャを使用すると、fn はその発生場所の周囲で定義された変数との接続を失いません。
• 変数が現在のスコープにない場合、JS はスコープ チェーンを検索する前でもクロージャを調べます。グローバル変数がある場合でも、そのクロージャで定義されている変数が最初に検索されるとします。
• クロージャはスコープチェーンよりも優先されます。
• 初めて booker() を実行すると、passengerCount の値が増加し、コンソールにログインしてから、booker がコール スタックからポップされます。
• 実行は次の行に移り、新しい EC が作成されますが、クロージャー変数はまだ存在します。既存の値がインクリメントされ、EC がポップアウトされます。
• このプロセスが 3 回繰り返されます。

まとめ

• 定義: クロージャは、EC がなくなった後でも、fn が作成された EC の変数環境を閉じたものです。

• また、クロージャは、親 fn が戻った後でも、その親 fn のすべての変数へのアクセスを fn に与えます。 fn はその外側のスコープへの参照を保持し、それによってスコープ チェーンが常に保持されます。

• クロージャは、fn が fn の誕生時に存在した変数との接続を失わないことを保証します。それは、fnがどこに行くにも持ち歩くバックパックのようなものです。このバックパックには、fn が作成された環境に存在していたすべての変数が含まれています。

• クロージャを手動で作成する必要はありません。また、クローズドオーバー変数に明示的にアクセスすることもできません。クロージャは有形の JS オブジェクトではありません。つまり、クロージャに到達してそこから変数を取得することはできません。これは fn の内部プロパティです。バックパックを確認するには、「console.dir(booker);」
  [[スコープ]] は、この fn 呼び出しの VE について表示します。

• [[]] は、コードからアクセスできない内部プロパティであることを意味します。

• クロージャを作成するために、別の fn から fn を返す必要は常にありません。以下の例では、変数 'f' はグローバル スコープ内にあるため、fn 内でも定義されていません。 g() が EC を終了した後でも、変数 'a' にアクセスできます。 「a」は今「f」のバックパックの中にいます。
  

let f;

const g = function(){
  const a = 23;
  f = function() {
    console.log(a*2); // 46
  };
};


const h = function(){
  const b = 777;
  f = function(){
    console.log(b*2); // 1554
  };
};

g();
f();
console.dir(f);

// f fn is reassigned using h fn. Hence, old closure value i.e 'a' will be replaced with new value 'b' which can be verified using console.dir().
h();
f();
console.dir(f);

• setTimeout(callbackFnToBeCalled, Delay);
• クロージャ変数はスコープ チェーンよりも優先されます。

// Boarding Passengers using Closures
const boardPassengers = function(n, wait){
  const perGroup = n / 3;

  setTimeout(function(){
    console.log(`We are now boarding all ${n} passengers`);
    console.log(`There are 3 groups, each with ${perGroup} passengers`)
  }, wait*1000);

  console.log(`Will start boarding in ${wait} seconds`);
}

boardPassengers(180, 3);

以上がJS のクロージャをわかりやすくするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。