JavaScript闭包详解：揭秘数据持久化的秘密花园

2023-10-02 21:42:32

闭包是什么？

闭包是一个 JavaScript 函数，该函数可以访问其父函数作用域中的变量，即使该父函数已执行完毕。

闭包的生命周期

闭包的生命周期与函数的作用域生命周期紧密相关，函数执行时，其作用域创建，函数执行完毕时，其作用域销毁。但是，如果函数内部存在闭包，那么该闭包可以访问父函数作用域中的变量，即使该父函数已执行完毕，该作用域已经被销毁。换句话说，闭包可以延长父函数作用域中变量的寿命。

闭包的两个作用

延长变量作用域

由于闭包可以访问父函数作用域中的变量，即使该父函数已执行完毕，该作用域已经被销毁。这使得闭包可以延长变量的作用域，使变量在需要时仍然可以被访问。

保护变量

如果变量存储在闭包中，则该变量不会受到外部作用域的影响。这意味着即使外部作用域中的变量被修改，也不会影响到闭包中的变量。这种特性使得闭包非常适合用于保护敏感数据，例如密码和信用卡号。

闭包在 JavaScript 中的应用

闭包在 JavaScript 开发中有着广泛的应用，包括：

事件处理

闭包经常用于事件处理，因为闭包可以使事件处理函数访问事件发生时的数据。例如，下面的代码使用闭包来为每个按钮创建一个单击事件处理函数，该函数可以访问按钮的 id：

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
  const button = buttons[i];
  button.addEventListener('click', (event) => {
    console.log(event.target.id);
  });
}

数据缓存

闭包可以用于缓存数据，以便以后使用。例如，下面的代码使用闭包来缓存一个函数的计算结果，以便该函数以后再次调用时，可以直接返回缓存的结果，从而提高性能：

const calculate = (n) => {
  let result = 0;
  for (let i = 1; i <= n; i++) {
    result += i;
  }
  return result;
};

const memoizedCalculate = (n) => {
  let cache = {};
  return (n) => {
    if (cache[n]) {
      return cache[n];
    }
    const result = calculate(n);
    cache[n] = result;
    return result;
  };
};

const memoizedCalculate = memoizedCalculate(100);
console.log(memoizedCalculate(100)); // 5050
console.log(memoizedCalculate(100)); // 5050