理解 JavaScript 中的閉包：從混亂到清晰

想像一下這個...

您正在開發一個項目，並且需要一個函數來「記住」變數的值 - 即使在函數完成運行之後也是如此。閉包就像一個神奇的背包，無論您在代碼中走到哪裡，它都可以讓您攜帶上一課的知識。它是 JavaScript 中最強大但又被誤解的概念之一。但別擔心，在本指南結束時，閉包將會從令人頭痛變成「啊哈！」

---

什麼是閉包？簡化的定義和類比

閉包是指即使在外部函數完成執行之後，函數也會「記住」其周圍狀態（其範圍內的變數）。讓我們用一個相關的類比來解釋：

現實生活中的類比：知識的背包

想像你是學生。你有一個背包，裡面裝著筆記、筆和書。您離開教室（您的外部功能），但您仍然可以使用背包中的所有物品（您的封閉裝置）。以後每當需要解決問題時，都可以拿出背包裡保存的知識。

簡化定義

在 JavaScript 中，閉包發生在以下情況：

1. 一個函數在另一個函數中定義。
2. 內部函數「記住」外部函數的變數。

---

閉包如何運作？實際例子

讓我們透過程式碼範例來了解閉包的實際應用。

範例 1：基本閉包

function outerFunction() {
  const outerVariable = 'Hello, Closure!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "Hello, Closure!"

這裡發生了什麼事？

• innerFunction 從outerFunction 回傳。
• 即使outerFunction已經執行完畢，innerFunction仍然記得outerVariable。

---

範例 2：計數器關閉

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

這裡發生了什麼事？

• 即使 createCounter 已完成執行，傳回的函數也會「記住」計數變數。
• 每次呼叫 counter 時，它都會更新並記住最新的 count 值。

---

範例 3：循環中的閉包（常見陷阱）

在循環內部使用閉包時，常常會讓開發人員陷入困境。

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), i * 1000);
}
// Output: 1, 2, 3 (each after 1 second)

為什麼有效？

• let 關鍵字會建立一個區塊作用域，因此每次迭代都有自己的 i。
• 如果您使用 var 而不是 let，則所有輸出將為 4，因為 var 不會建立區塊作用域。

？ 文件：MDN 上的關閉

---

閉包的常見用例

閉包不只是一個理論概念－它們非常實用！以下是閉包發揮作用的一些常見場景。

1. 資料快取

閉包可以儲存運算值以供重複使用，從而節省時間和資源。

function outerFunction() {
  const outerVariable = 'Hello, Closure!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: "Hello, Closure!"

2. 事件處理程序

閉包經常在事件監聽器中使用來維護狀態。

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

3. 私有變數

您可以使用閉包來建立私有變量，封裝功能。

for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), i * 1000);
}
// Output: 1, 2, 3 (each after 1 second)

---

為什麼閉包很強大

閉包允許您：

• 保留狀態：即使在函數執行完畢後也記住變數。
• 封裝功能：保持變數的私有性和安全性。
• 簡化程式碼：透過使用閉包進行狀態管理來避免全域變數。

---

結論：挑戰自己使用閉包

閉包就像 JavaScript 中的瑞士軍刀。無論您是快取資料、處理事件還是建立私有變量，閉包都為您提供了管理應用程式狀態的強大方法。

你的挑戰：嘗試在一個小專案中使用閉包，例如建立一個簡單的計數器或建立一個快取機制。你會驚訝於控制閉包帶給你的好處！

---

如果您喜歡這篇文章，請考慮支持我的工作：

• 請我喝杯咖啡
• 預約電話尋求指導或職業建議
• 在 Twitter 上追蹤我
• 在 LinkedIn 上聯絡

以上是理解 JavaScript 中的閉包：從混亂到清晰的詳細內容。更多資訊請關注PHP中文網其他相關文章！