JavaScript - 閉包

什麼是閉包？

JavaScript 中的閉包概念允許巢狀函式訪問父函式作用域中定義的變數，即使父函式的執行已經結束。簡而言之，您可以使用閉包將全域性變數變為區域性變數或私有變數。

JavaScript 閉包基本上是函式及其詞法環境的組合。這允許內部函式訪問外部函式的作用域。閉包在函式建立時被建立。

在開始學習閉包概念之前，您需要了解詞法作用域、巢狀函式和返回函式的概念。

詞法作用域

在 JavaScript 中，詞法作用域是一個概念，其中變數的作用域在程式碼編譯時根據程式碼結構確定。例如，巢狀函式可以訪問父函式作用域中的變數，這稱為詞法作用域。

巢狀函式

您可以在函式內部定義函式，內部函式稱為巢狀函式。讓我們透過下面的示例來學習它。

示例

在下面的示例中，我們在 outer() 函式內部定義了 inner() 函式。此外，inner() 函式在 outer() 函式內部執行。

當我們執行 outer() 函式時，它還會執行 inner() 函式，這是一個巢狀函式。

<html>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function outer() {
         output.innerHTML += "The outer function is executed! <br>";
         function inner() {
            output.innerHTML += "The inner function is executed! <br>";
         }
         inner();
      }
      outer();
   </script>
</body>
</html>

輸出

The outer function is executed!
The inner function is executed!

返回函式

當任何函式返回函式而不是值或變數時，它被稱為返回函式。讓我們看看下面的例子。

示例

在下面的程式碼中，outer() 函式返回函式定義，我們將其儲存在 'func' 變數中。之後，我們使用 'func' 變數來呼叫其中儲存的函式。

<html>
<head>
   <title> JavaScript - Returning function </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function outer() {
         output.innerHTML += "The outer function is executed! <br>";
         return function inner() {
            output.innerHTML += "The inner function is executed! <br>";
         }
      }
      const func = outer();
      func();
      func();
   </script>
</body>
</html>

輸出

The outer function is executed!
The inner function is executed!
The inner function is executed!

現在，您已經學習了學習閉包所需的先決條件。

JavaScript 閉包的定義有點令人困惑，但我們將逐步學習閉包概念，以便您能理解。

計數器困境

例如，您建立一個計數器來遞增和遞減變數。如下所示，您需要使用全域性變數作為計數器。

示例

在下面的示例中，全域性變數 'cnt' 初始化為 100。每當執行 decrement() 函式時，它都會將 'cnt' 變數的值減 1。

<html>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      var cnt = 100;
      function decrement() {
         cnt = cnt - 1;
         output.innerHTML += "The value of the cnt is: " + cnt + "<br>";
      }
      decrement();
      decrement();
      decrement();
   </script>
</body>
</html>

輸出

The value of the cnt is: 99
The value of the cnt is: 98
The value of the cnt is: 97

上面的程式碼可以完美地作為遞減計數器工作，但問題是 'cnt' 變數可以在程式碼中的任何位置訪問，程式碼的任何部分都可以在不執行 decrement() 函式的情況下更改它。

在這裡，JavaScript 閉包就派上用場了。

示例：JavaScript 閉包

在下面的示例中，counter() 函式返回 decrement() 函式。'cnt' 變數是在 counter() 函式內部定義的，而不是在全域性作用域中。

decrement() 函式將 'cnt' 的值減 1 並列印在輸出中。

'func' 變數包含 decrement() 函式表示式。每當您執行 func() 時，它都會呼叫 decrement() 函式。

<html>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function counter() {
         let cnt = 100; // Works as a global variable for the decrement function.
         return function decrement() {
            cnt = cnt - 1;
            output.innerHTML += "The value of the cnt is: " + cnt + "<br>";
         }
      }
      const func = counter(); // Returns the decrement() function expression
      func();
      func();
      func();
   </script>
</body>
</html>

輸出

The value of the cnt is: 99
The value of the cnt is: 98
The value of the cnt is: 97

現在，讓我們再次記住閉包的定義。它表示巢狀函式可以訪問外部函式作用域中的變數，即使外部函式的執行已經結束。

在這裡，counter() 函式的執行已經結束。您仍然可以呼叫 decrement() 函式並訪問具有更新值的 'cnt' 變數。

讓我們看看另一個閉包的例子。

示例

在下面的示例中，name() 函式返回 getFullName() 函式。getFullName() 函式將字串與在外部函式作用域中定義的 'name' 變數合併。

<html>
<head>
   <title> JavaScript - Closure </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function name() {
         let name = "John";
         return function getFullName() {
            return name + " Doe";
         }
      }

      const fullName = name();
      output.innerHTML += "The full name is " + fullName();
   </script>
</body>
</html>

輸出

The full name is John Doe

閉包的優點

以下是 JavaScript 中閉包的一些優點：

封裝性 − 閉包允許開發者隱藏或封裝資料。它使資料私有化，無法從全域性作用域訪問。因此，您可以只公開所需的變數和函式，並隱藏程式碼的其他內部細節。
保持狀態 − 函式即使在外部函式執行完成後，也能記住其詞法作用域。因此，開發者可以像我們在上面的例子中維護計數器狀態一樣，維護狀態。
提高記憶體效率 − 閉包允許您有效地管理記憶體，因為您只需保留對必要變數的訪問許可權，而無需在全域性範圍內定義變數。

列印頁面