掌握 JavaScript 中的閉包：了解範圍、封裝和效能

關閉

定義

閉包是一項功能，允許函數存取在相同作用域層級（詞法作用域）中聲明的所有其他變數和函數。

• 閉包是一項功能，允許函數存取在相同作用域層級（詞法作用域）中聲明的所有其他變數和函數。
• 當一個函數在另一個函數（外部函數和內部函數）中定義時，就會建立閉包。內部函數將建立一個閉包，為該外部函數中建立的所有變數和函數提供對內部函數的存取。
• 閉包允許內部函數存取外部函數中聲明的變量，即使在外部函數返回後也是如此。
• 我們必須正確處理內存，閉包會導致內存洩漏和更好的內存管理。

• JavaScript 中的閉包與 Java 中的私有方法具有類似的用途，可讓您建立私有變數並封裝功能。

  例子

  function outerFunction() {
      let outerVariable = 'I am from outer scope';
  
      function innerFunction() {
          console.log(outerVariable); // Accessing outerVariable from the outer scope
      }
  
      return innerFunction; // Return the inner function
  }
  
  const closureFunction = outerFunction(); // Call outerFunction, which returns innerFunction
  closureFunction(); // Outputs: I am from outer scope
  

  • 在上面的範例中我們呼叫內部函數只是因為它只是被回傳。儘管我們可以訪問outerVariable。
  • 讓我們來看另一個最好的例子

      function handleCount() {
      let count = 0;
  
      return {
          increment: () => {
                  count++;
                  return count;
          },
          decrement: () => {
                  count--;
                  return count;
          },
          getCount: () => {
                  return count;
          },
      };
  }
  
  const counter = handleCount();
  console.log(counter.increment()); // Outputs: 1
  console.log(counter.increment()); // Outputs: 2
  console.log(counter.getCount());  // Outputs: 2
  console.log(counter.decrement()); // Outputs: 1
  console.log(counter.getCount());  // Outputs: 1
  

  • 現在，每次我們呼叫增量、減量、getCount（而不是handleCount）時，都會啟動，只有被呼叫的函數才會被執行，而且我們也可以存取其範圍之外的變數。這稱為閉包。

需要記住的要點

• 定義：閉包是一個保留對其詞法作用域的存取的函數，即使該函數在該作用域之外執行也是如此。
• 作用域鏈：當一個函數在另一個函數中定義時，就會建立閉包。內部函數形成一個包含外部函數作用域的閉包。
• 存取變數：閉包允許內部函數存取外部函數中聲明的變量，即使在外部函數返回後也是如此。
• 私有變數：閉包通常用於建立私有變數。這意味著變數可以在全域作用域中隱藏，只能透過閉包來存取。
• 記憶體管理：閉包可以帶來更好的記憶體效率，因為它們只保留執行所需的變數。
• 效能注意事項：雖然閉包功能強大，但如果管理不當，它們也可能導致記憶體洩漏，特別是在長期存在的物件或事件偵聽器中。

使用案例

• 封裝：建立私有資料或方法。
• 函數工廠：使用預設參數建立函數。
• 回呼：用於非同步程式設計（例如在事件處理程序或setTimeout中）。
• CSS：rem 和 em。 rem 源自根元素（html / body），但 em 源自其近父元素。

常見面試問題

• 什麼是閉包，它是如何運作的？
• 你能解釋一下閉包和普通函數之間的區別嗎？
• 提供 JavaScript 中閉包的範例。
• JavaScript 中閉包的用例有哪些？
• 閉包如何導致記憶體洩漏，以及如何防止它們？

以上是掌握 JavaScript 中的閉包：了解範圍、封裝和效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！