一文詳解JavaScript中的閉包-js教程-PHP中文網

什麼是 JavaScript 閉包？

閉包的用途

封裝變數和函數

快取資料

實作模組化

事件處理

函数柯里化

异步编程

闭包的缺陷

内存泄漏问题

性能问题

安全性問題

可讀性問題

總結

首頁

web前端

js教程

一文詳解JavaScript中的閉包

青灯夜游

Apr 24, 2023 pm 05:57 PM

javascript 前端閉包

JavaScript 閉包是一種重要的概念，在 JavaScript 程式設計中被廣泛使用。儘管它可能會讓初學者感到困惑，但它是理解 JavaScript 語言核心的關鍵概念之一。本文將深入探討 JavaScript 閉包，讓你了解它是如何運作的，以及在實際應用中的使用方法。

一文詳解JavaScript中的閉包

什麼是 JavaScript 閉包？

在 JavaScript 中，閉包是指一個函數能夠存取在它外部定義的變數。這些變數通常被稱為“自由變數”，因為它們不是該函數的局部變量，也不是該函數的參數。閉包可以在函數內部創建，也可以在函數外部創建。

JavaScript 中的每個函數都是閉包，因為它們都能夠存取自由變數。當一個函數被呼叫時，它會建立一個新的執行環境，其中包含該函數的局部變數和參數。這個執行環境也包括一個指向該函數定義所在的作用域的參考。這個引用被稱為函數的“作用域鏈”，它是由所有包含該函數定義的作用域物件組成的鍊錶。【推薦學習：javascript影片教學】

當函數內部需要存取自由變數時，它會先在自己的局部變數中找出是否存在該變數。如果不存在，它會繼續沿著作用域鏈向上查找，直到找到變數為止。這就是閉包的核心機制。

簡單來說，閉包就是一個函數，其中包含了對外部變數的引用，這些變數在函數外部定義，但在函數內部仍然可以被存取和操作。閉包的本質是將函數和其引用的外部變數封裝在一起，形成了一個不受外部幹擾的環境，使得函數可以存取和修改外部變量，並且這些修改也會反映到函數外部的變數中。

理解閉包的工作原理對於編寫高品質的 JavaScript 程式碼至關重要，因為它可以讓我們更好地管理變數和函數的作用域，以及實現更複雜的功能。

閉包的用途

封裝變數和函數

##閉包可以用來封裝變量，使其不受外部幹擾。這是因為閉包可以在函數內部定義一個變數，並在函數外部建立一個存取該變數的函數。這個存取函數可以存取該變量，但是外部無法直接存取該變量，從而保證了變數的安全性。

例如，我們可以使用閉包來實作一個計數器：

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

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

登入後複製

在這個範例中，我們使用閉包來封裝了計數器變數 count，使其不受外部幹擾。每次呼叫 counter 函數時，它都會傳回計數器的下一個值。

快取資料

使用閉包可以快取函數的計算結果，避免多次計算相同的值，進而提高程式碼的效能。這種方式適用於那些計算量較大、但結果不常變化的函數，例如斐波那契數列等。

下面看一個程式碼範例：

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn(...args);
      cache[key] = result;
      return result;
    }
  }
}

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const memoizedFib = memoize(fibonacci);
console.log(memoizedFib(10)); // 输出 55
console.log(memoizedFib(10)); // 输出 55，直接从缓存中读取

登入後複製

在這個範例中，我們定義了一個 memoize 函數，它接受一個函數作為參數，並且傳回了一個閉包函數。閉包函數內部維護了一個快取物件 cache，用於保存函數的計算結果。每次呼叫閉包函數時，它會根據傳入的參數產生一個唯一的鍵值，並從快取中嘗試讀取計算結果。如果快取中已經存在該鍵值，直接傳回快取結果，否則呼叫傳入的函數計算結果，並將結果儲存到快取中。這種方式可以避免多次計算相同的值，從而提高程式碼的效能。

實作模組化

使用閉包可以實現模組化的程式設計方式，這種方式可以將程式碼分割成多個模組，使得每個模組只關注自己的功能，從而提高程式碼的可維護性和可讀性。同時，閉包也可以實現公共和私有變數的封裝，避免了全域變數的污染。

例如，我們可以使用閉包來實作一個簡單的模組：

const module = (function() {
  const privateVar = &#39;I am private&#39;;
  const publicVar = &#39;I am public&#39;;
  function privateFn() {
    console.log(&#39;I am a private function&#39;);
  }
  function publicFn() {
    console.log(&#39;I am a public function&#39;);
  }
  return {
    publicVar,
    publicFn
  };
})();

console.log(module.publicVar); // 输出 &#39;I am public&#39;
module.publicFn(); // 输出 &#39;I am a public function&#39;
console.log(module.privateVar); // 输出 undefined
module.privateFn(); // 报错，无法访问私有函数

登入後複製

在這個範例中，我們定義了一個立即執行函數，內部傳回了一個物件。物件中包含了公共變數和函數，以及私有變數和函數。透過這種方式，我們可以將程式碼分割成多個模組，每個模組只專注於自己的功能，從而提高程式碼的可維護性和可讀性。同時，私有變數和函數只在函數內部可見，外部無法存取和修改它們，從而避免了全域變數的污染。

事件處理

以下是使用閉包進行事件處理的範例：

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(`Clicked ${count} times`);
  }

  function decrement() {
    count--;
    console.log(`Clicked ${count} times`);
  }

  function getCount() {
    return count;
  }

  return {
    increment,
    decrement,
    getCount
  };
}

const counter = createCounter();

document.querySelector(&#39;#increment&#39;).addEventListener(&#39;click&#39;, counter.increment);
document.querySelector(&#39;#decrement&#39;).addEventListener(&#39;click&#39;, counter.decrement);

登入後複製

在这个示例中，我们定义了一个名为createCounter的函数，该函数返回一个对象，该对象包含三个方法：increment，decrement和getCount。increment方法将计数器加1，decrement方法将计数器减1，getCount方法返回当前计数器的值。

我们使用createCounter函数创建了一个计数器对象counter，并将increment方法和decrement方法分别注册为加1和减1按钮的点击事件处理函数。由于increment和decrement方法内部引用了createCounter函数内部的局部变量count，因此它们形成了闭包，可以访问和修改count变量。

这个示例中，我们将计数器对象的逻辑封装在一个函数内部，并返回一个包含方法的对象，这样可以避免全局变量的使用，提高代码的可维护性和可重用性。

函数柯里化

以下是一个使用闭包实现的函数柯里化例子：

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

const add5 = add(5); // x = 5
console.log(add5(3)); // 输出 8
console.log(add5(7)); // 输出 12

登入後複製

在这个例子中，我们定义了一个名为add的函数，该函数接受一个参数x并返回一个内部函数，内部函数接受一个参数y，并返回x + y的结果。

我们使用add函数创建了一个新的函数add5，该函数的x值为5。我们可以多次调用add5函数，每次传入不同的y值进行求和运算。由于add函数返回了一个内部函数，并且内部函数引用了add函数内部的参数x，因此内部函数形成了一个闭包，可以访问和保留x值的状态。

这个例子中，我们实现了一个简单的函数柯里化，将接收多个参数的函数转化为接收一个参数的函数。函数柯里化可以帮助我们更方便地进行函数复合和函数重用。

异步编程

以下是一个使用闭包实现的异步编程的例子：

function fetchData(url) {
  return function(callback) {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        callback(null, data);
      })
      .catch(error => {
        callback(error, null);
      });
  }
}

const getData = fetchData(&#39;https://jsonplaceholder.typicode.com/todos/1&#39;);
getData(function(error, data) {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

登入後複製

在这个例子中，我们定义了一个名为fetchData的函数，该函数接受一个URL参数，并返回一个内部函数。内部函数执行异步操作，请求URL并将响应解析为JSON格式的数据，然后调用传入的回调函数并将解析后的数据或错误作为参数传递。

我们使用fetchData函数创建了一个getData函数，该函数请求JSONPlaceholder API的一个TODO项，并将响应解析为JSON格式的数据，然后将数据或错误传递给回调函数。由于fetchData函数返回了一个内部函数，并且内部函数引用了fetchData函数内部的URL参数和回调函数，因此内部函数形成了闭包，可以访问和保留URL参数和回调函数的状态。

这个例子中，我们使用了异步编程模型，通过将回调函数作为参数传递，实现了在异步请求完成后执行相关的操作。使用闭包可以方便地管理异步请求和相关的状态，提高代码的可读性和可维护性。

闭包的缺陷

JS 闭包具有许多优点，但也有一些缺点，包括：

内存泄漏问题

由于闭包会将外部函数的局部变量引用保存在内存中，因此如果闭包一直存在，外部函数的局部变量也会一直存在，从而导致内存泄漏。

在 JavaScript 中，闭包是指一个函数能够访问并操作其父级作用域中的变量，即便该函数已经执行完毕，这些变量仍然存在。由于闭包会引用父级作用域中的变量，因此，这些变量不会在函数执行完毕时被垃圾回收机制回收，从而占用了内存资源，这就是闭包引起内存泄漏的原因。

以下是一个闭包引起内存泄漏的示例：

function myFunc() {
  var count = 0;
  setInterval(function() {
    console.log(++count);
  }, 1000);
}

myFunc();

登入後複製

在这个示例中，myFunc 函数中定义了一个变量 count，然后创建了一个计时器，在每秒钟打印 count 的值。由于计时器函数是一个闭包，它会保留对 myFunc 中的 count 变量的引用，这意味着即使 myFunc 函数执行完毕，计时器函数仍然可以访问 count 变量，从而阻止 count 变量被垃圾回收机制回收。如果我们不停地调用 myFunc 函数，将会创建多个计时器函数，每个函数都会占用一定的内存资源，最终会导致内存泄漏。