掌握 JavaScript 中的閉包：帶有範例的完整指南

介紹

想像一下，你正在建立一個應用程序，深夜，手上拿著咖啡，同時調試一段表現......神秘的 JavaScript 代碼。它在另一個函數中呼叫函數，以您意想不到的方式保存值，而您的 console.log 語句並沒有讓事情變得更清晰。突然，您意識到這個問題是您只聽說過的問題：關閉。

JavaScript 中的閉包通常被表示為一個有點神奇或抽象的概念。但它們實際上是 JavaScript 處理函數和作用域的基本部分，理解它們可以將午夜編碼會議變成「啊哈！」時刻而不是令人沮喪的經歷。本指南將透過超越基礎知識的見解和範例，以一種使閉包變得平易近人、有用甚至令人愉快的方式來分解閉包。

什麼是閉包？

閉包是 JavaScript 的功能，即使在外部函數完成執行之後，內部函數也可以存取外部（封閉）函數的變數。發生這種情況是因為 JavaScript「關閉」了創建函數的環境（詞法作用域），將上下文保留在記憶體中。結果呢？可以「記住」創建它們的環境的函數，允許資料隱私、記憶等強大功能。

現實世界中閉包的定義

想像一下，您住在一棟有多個房間的房子裡，並且您有一把鑰匙可以打開一個特定房間 - 我們將其稱為“數據室”。鑰匙象徵著結束。即使主門（創建鑰匙的功能）被鎖定，您仍然可以存取資料室，因為您保留了鑰匙。類似地，閉包保留對其原始函數中變數的訪問，即使函數已完成。

為什麼閉包對開發人員很重要

閉包是創建私有變數和函數模式（例如柯里化和記憶化）的基礎。根據 Stack Overflow 的開發者調查，JavaScript 是最受歡迎的程式語言，有近 65% 的專業開發者使用，因此紮實掌握閉包對於有效使用 JavaScript 至關重要。

---

JavaScript 中閉包的工作原理：範例和模式

基本閉包範例

讓我們從一個簡單的範例開始，示範閉包如何實際運作。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

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

以下是這段程式碼中發生的事情：

1. createCounter 函數定義了一個局部變數 count。
2. 內部函數（閉包）遞增 count 變數並傳回它。
3. 即使 createCounter 已完成執行，內部函數仍然可以存取 count - 這是一個正在執行的閉包。

這個例子看似簡單，但它顯示了閉包的一個重要特性：保存狀態。

---

更深入：閉包的高階用例

1. 閉包的資料隱私

閉包最強大的用例之一是創建資料隱私，這是一種使我們能夠限制對某些變數或函數的直接存取的技術。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

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

在這裡，餘額是私有的，只能透過 Deposit 和 getBalance 來存取或修改。這類似於 OOP 中私有欄位的工作方式，但在 JavaScript 中，我們使用閉包來實現這一點。

2. 帶有閉包的柯里化函數

柯里化是一種函數式程式設計模式，它利用閉包來允許部分應用函數。

function bankAccount(initialBalance) {
  let balance = initialBalance;

  return {
    deposit(amount) {
      balance += amount;
    },
    getBalance() {
      return balance;
    }
  };
}

const myAccount = bankAccount(1000);
myAccount.deposit(500);
console.log(myAccount.getBalance()); // Output: 1500
console.log(myAccount.balance); // Output: undefined

在此範例中，乘法器創建了一個保留對因子的存取的閉包，使我們能夠透過簡單地傳遞不同的因子來創建特殊的函數，例如雙倍或三倍。

---

常見陷阱以及如何避免它們

循環中的閉包

在循環中使用閉包可能會讓開發人員陷入困境。一個典型的問題涉及閉包捕獲循環的變數而不是其當前值。

考慮這個例子：

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // Output: 10

輸出：

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

因為 i 在循環的所有迭代中共享，所以 i (3) 的最終值被印三次。若要解決此問題，請使用 let 建立區塊作用域變量，或在循環內建立閉包：

3
3
3

現在，輸出將如預期的那樣為 0, 1, 2，因為每個函數都有自己的 i 副本（此處為 j）。

---

性能考慮因素

閉包會消耗內存，因為它們保存來自外部作用域的變數。在高效能應用程式中，當不再需要閉包時，透過清理閉包來注意記憶體洩漏，特別是在長時間運行的應用程式中。 Chrome DevTools 等工具提供了記憶體分析工具，可以幫助識別和優化記憶體使用情況。

---

JavaScript 框架的實際應用

閉包是 React 等流行框架的基礎，其中 useState 和 useEffect 等鉤子使用閉包來「記住」渲染之間的值和狀態。了解閉包可以揭開這些鉤子在幕後工作原理的神秘面紗，從而更輕鬆地編寫優化的、無錯誤的程式碼。

---

最後的想法：充分利用閉包

掌握閉包可以打開許多高階程式技術的大門。它們對於編寫乾淨、模組化和高效的 JavaScript 程式碼至關重要。不要迴避閉包，而應該將它們作為 JavaScript 工具包中的強大工具。

---

來源

1. Mozilla 開發者網路 (MDN)：關閉
2. JavaScript：大衛‧弗拉納根 (David Flanagan) 的權威指南

理解閉包不僅可以幫助您更快地調試程式碼，還可以為掌握 JavaScript 基於函數的結構奠定堅實的基礎，幫助您順利過渡到框架、使用 Node.js 進行後端程式設計等。無論您是建立可擴展的應用程式還是創建高度互動的前端，閉包都是一項值得掌握的技能。

以上是掌握 JavaScript 中的閉包：帶有範例的完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！