閉合允許內(nèi)部功能即使在外部功能完成後也可以從其外部範(fàn)圍內(nèi)記住變量，從而實(shí)現(xiàn)了數(shù)據(jù)隱私和功能工廠。 2。事件循環(huán)不是JavaScript的一部分，而是運(yùn)行時(shí)環(huán)境的一部分，在呼叫堆棧，回調(diào)隊(duì)列和異步瀏覽器API之間進(jìn)行協(xié)調(diào)以管理執(zhí)行訂單。 3。在帶有settimeout示例的循環(huán)中，使用var導(dǎo)向所有引用相同i的閉合（導(dǎo)致4、4、4），可以通過使用塊填充的let或用iife創(chuàng)建單個(gè)封閉來固定，以正確捕獲每個(gè)值。了解閉合和事件循環(huán)闡明了JavaScript如何處理範(fàn)圍，內(nèi)存和異步操作，從而使行為看似令人困惑，可預(yù)測和邏輯。

當(dāng)您第一次學(xué)習(xí)關(guān)閉和事件循環(huán)時(shí)，JavaScript似乎很棘手，這是該語言中最有力但最誤解的概念。他們不是魔術(shù)。一旦您了解了它們的工作原理，許多“怪異”的JavaScript行為就開始變得有意義。讓我們簡單地將它們分解。

什麼是關(guān)閉？ （以及為什麼重要）

閉合是一個(gè)函數(shù)，它可以記住創(chuàng)建範(fàn)圍的變量，即使在範(fàn)圍完成運(yùn)行之後。

這是一個(gè)簡單的例子：

功能outer（）{
  令name =“愛麗絲”;
  函數(shù)內(nèi)（）{
    console.log（name）; //內(nèi)部“記住”`name'
  }
  返回內(nèi)部；
}

const func = outer（）;
func（）; //日誌“愛麗絲”

即使outer()已經(jīng)完成執(zhí)行，但inner函數(shù)仍然可以訪問name變量。這是一個(gè)封閉。

要點(diǎn)：

• 每次在另一個(gè)函數(shù)內(nèi)定義一個(gè)函數(shù)時(shí)，都會創(chuàng)建閉合。
• 它允許內(nèi)部函數(shù)訪問外部功能變量。
• 關(guān)閉是數(shù)據(jù)隱私，功能工廠和回調(diào)處理程序等模式的基礎(chǔ)。

實(shí)際用例：

函數(shù)createCounter（）{
  讓計(jì)數(shù)= 0;
  返回函數(shù)（）{
    數(shù)數(shù) ;
    console.log（count）;
  };
}

const counter = createCounter（）;
櫃檯（）; // 1
櫃檯（）; // 2

count變量為“私有” - 沒有外部代碼可以觸摸它。只有返回的功能才能修改它。這是封閉的行動。

事件循環(huán)的工作原理（這不是JavaScript的一部分）

這是一個(gè)常見的誤解：事件循環(huán)不是JavaScript引擎的一部分。它是JavaScript運(yùn)行時(shí)環(huán)境的一部分，例如您的瀏覽器或node.js。

JavaScript本身是單線程：一次只能做一件事情。但是瀏覽器可以做更多的事情（例如句柄點(diǎn)擊，計(jì)時(shí)器，HTTP請求）。事件循環(huán)是協(xié)調(diào)所有這些的原因。

JavaScript執(zhí)行模型

運(yùn)行代碼時(shí)，JavaScript使用：

• 調(diào)用堆棧- 跟蹤功能調(diào)用。
• 回調(diào)隊(duì)列- 保留異步回調(diào)（例如從setTimeout或單擊事件）。
• 事件循環(huán)- 檢查呼叫堆棧是否為空，如果是的，則將隊(duì)列從隊(duì)列推入堆棧。

讓我們看看它的行動：

 console.log（“ 1”）;

settimeout（（）=> {
  console.log（“ 2”）;
}，0）;

console.log（“ 3”）;

您可能期望：1、2、3
但是你得到了：1、3、2

為什麼？

• console.log("1")立即運(yùn)行。
• setTimeout是異步的 - 它已移交給等待0ms的瀏覽器API，然後將回調(diào)放入回調(diào)隊(duì)列中。
• console.log("3")運(yùn)行下一個(gè)（同步代碼完成）。
• 只有在呼叫堆棧為空之後，事件循環(huán)才能拿起排隊(duì)的回調(diào)和運(yùn)行console.log("2") 。

因此：無論超時(shí)延遲，同步代碼總是在異步回調(diào)之前運(yùn)行。

將關(guān)閉和事件循環(huán)放在一起

經(jīng)典的陷阱結(jié)合了封閉和事件循環(huán)：

 for（var i = 1; i <= 3; i）{
  settimeout（（）=> {
    console.log（i）;
  }，100）;
}

您可能期望：1、2、3
但是你得到了：4、4、4

為什麼？

• var在遍歷迭代範(fàn)圍內(nèi)被功能分配和共享。
• 到setTimeout回調(diào)運(yùn)行時(shí)，循環(huán)已經(jīng)完成，並且i === 4 。
• 所有封閉都會引用相同的i 。

修復(fù)1：使用let （塊分割）

 （讓i = 1; i <= 3; i）{
  settimeout（（）=> {
    console.log（i）;
  }，100）;
}
// logs 1，2，3  - 因?yàn)槊總€(gè)i cop oppope

修復(fù)2：用iife創(chuàng)建一個(gè)封閉

for（var i = 1; i <= 3; i）{
  （函數(shù)（num）{
    settimeout（（）=> {
      console.log（num）;
    }，100）;
  }）（我）;
}

現(xiàn)在，每個(gè)超時(shí)都可以通過封閉來獲得我自己的i副本。

關(guān)閉和事件循環(huán)不僅是採訪瑣事 - 它們塑造了真實(shí)應(yīng)用的行為方式。封閉使您封裝數(shù)據(jù)並使用內(nèi)存創(chuàng)建可重複使用的功能。事件循環(huán)確保您的應(yīng)用程序保持響應(yīng)良好，即使處理延遲或用戶輸入也是如此。

理解它們從JavaScript中的異步代碼，計(jì)時(shí)器和州管理中刪除了奧秘。

基本上，關(guān)閉是關(guān)於範(fàn)圍和內(nèi)存的，事件循環(huán)是關(guān)於時(shí)間和協(xié)調(diào)的。獲取這些，並且許多JavaScript開始點(diǎn)擊。

以上是揭開JavaScript關(guān)閉和事件循環(huán)的神秘面紗的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！