了解 JavaScript 閉包：綜合指南

了解 JavaScript 閉包：綜合指南。

什麼是閉包？

閉包是一個基本的 JavaScript 概念，其中內部函數可以存取其外部（封閉）函數的變數和參數，即使在外部函數完成執行之後也是如此。簡而言之，閉包允許函數「記住」並存取其外部作用域中的變量，即使該函數在不同的作用域中執行也是如此。

閉包的三個範圍

JavaScript 中的每個閉包都可以存取三個作用域：

• 它自己的作用域（函數內部定義的變數）
• 外部函數的變數（來自其父函數的變數）
• 全域變數（整個應用程式中可用的變數）

詞彙範圍：基礎

讓我們透過一個基本範例來了解詞法作用域：

function init() {
  var name = "Mozilla"; // local variable created by init
  function displayName() {
    // inner function
    console.log(name); // uses variable declared in parent function
  }
  displayName();
}
init();

在此範例中：

• init() 函數建立一個局部變數名稱和一個內部函數 displayName()
• displayName() 是一個內部函數，只存在於 init()
• displayName() 沒有自己的局部變數
• 由於詞法作用域，它可以存取其父作用域中的變量，包括名稱

理解行動中的閉包

讓我們來看看示範閉包的稍加修改的版本：

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

理解重點：

• 這看起來與前面的範例類似，但有一個關鍵的區別
• 我們不是立即執行內部函數，而是回傳它
• 即使 makeFunc() 已經執行完畢，myFunc 仍然可以存取 name 變數
• 這是可能的，因為函數維護對其詞法環境的引用

實例：函數工廠

這裡有一個更實際的例子，展示了閉包的威力：

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2));  // outputs 7
console.log(add10(2)); // outputs 12

讓我們來分析一下發生了什麼事：

• makeAdder 是一個函數工廠 - 它建立自訂函數
• 它所建立的每個函數都會記得傳遞給 makeAdder 的 x 值
• add5 和 add10 都是閉包：

它們共享相同的函數定義
但他們有不同的詞彙環境
在add5的環境中，x是5
在add10的環境中，x是10

為什麼關閉很重要

閉包非常強大，因為它們允許：

1. 資料隱私：閉包內的變數保持私有，無法從外部存取
2. 狀態保存：它們可以在函數呼叫之間維護狀態
3. 函數工廠：您可以使用預設參數建立專門的函數
4. 模組模式：它們是 JavaScript 中模組模式的基礎

結論

理解閉包對於 JavaScript 開發人員至關重要，因為它們廣泛用於現代 JavaScript 模式、框架和程式庫。它們提供了一種在函數式程式設計中建立私有變數和維護狀態的方法，同時保持程式碼整潔和可維護。

記住： 閉包不僅僅是另一個函數中的函數- 它是一個可以訪問其外部作用域中的變數的函數，並且即使在外部函數完成執行後也能保持該存取權限。

以上是了解 JavaScript 閉包：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！