JavaScript 中閉包的威力-js教程-PHP中文網

JavaScript 是一個豐富的功能寶庫，讓編寫程式碼成為一種樂趣。在眾多精華中，閉包脫穎而出，成為最強大、最有趣的概念之一。閉包一開始可能感覺有點抽象，但是一旦您理解了它們，它們就會為編寫高效且優雅的程式碼打開一個充滿可能性的世界。

讓我們深入了解閉包，揭開它們的工作原理，並探索它們如何提高您的 JavaScript 技能。

什麼是閉包？

閉包的核心是一個「記住」創建它的環境的函數。這意味著即使在該作用域完成執行之後，閉包也可以從其外部作用域存取變數。它就像變數的時間膠囊，讓您在它們看似消失後很長一段時間內保留並使用它們。

這是一個入門範例：

function outerFunction() {
  let message = "Hello, Closure!";

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

  return innerFunction;
}

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

登入後複製

在這個例子中，innerFunction 是一個閉包。即使outerFunction 已完成執行，innerFunction 仍然可以存取訊息變數。魔法？不完全是——這就是閉包的工作原理！

為什麼閉包很重要？

閉包不僅僅是理論概念；它們是您可以用來解決現實世界問題的實用工具。

這就是它們如此強大的原因：

封裝：閉包可讓您隱藏變數並建立私有狀態。
效率：它們有助於保留上下文，而無需重複傳遞變數。
靈活性：閉包啟用柯里化和部分應用等模式，可以簡化複雜的邏輯。

閉包的實際用途

用途很多，但這裡有一些：

1. 建立私有變數

JavaScript 沒有傳統的存取修飾符，如 private 或 protected，但閉包可以模仿這種行為：

function createCounter() {
  let count = 0;

  return {
    increment: function () {
      count++;
      console.log(count);
    },
    decrement: function () {
      count--;
      console.log(count);
    },
  };
}

const counter = createCounter();
counter.increment(); // Output: 1
counter.increment(); // Output: 2
counter.decrement(); // Output: 1

登入後複製

這裡，計數只能透過遞增和遞減函數來存取。這種封裝可以確保變數免受意外修改。

2. 函數工廠

閉包可以輕鬆產生自訂函數：

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

const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // Output: 10
console.log(triple(5)); // Output: 15

登入後複製

透過利用閉包，我們建立針對特定行為的可重複使用函數。

3. 記憶

閉包經常用於記憶，這是一種透過快取昂貴的函數呼叫結果來最佳化效能的技術：

function memoize(fn) {
  const cache = {};

  return function (key) {
    if (cache[key]) {
      console.log("Fetching from cache:", key);
      return cache[key];
    }
    console.log("Calculating result:", key);
    const result = fn(key);
    cache[key] = result;
    return result;
  };
}

const square = memoize((x) => x * x);
console.log(square(4)); // Calculating result: 4 => Output: 16
console.log(square(4)); // Fetching from cache: 4 => Output: 16

登入後複製

記憶化透過利用閉包儲存先前計算的結果來加速重複調用。

4. 事件處理程序

閉包經常用於事件處理中以保留上下文或狀態：

function setupButton(id) {
  let clickCount = 0;

  document.getElementById(id).addEventListener("click", function () {
    clickCount++;
    console.log(`Button clicked ${clickCount} times`);
  });
}
setupButton("myButton");

登入後複製

每次點擊按鈕都會增加一個私人計數器，示範閉包如何在多次互動中維護狀態。