深入理解JavaScript闭包：原理、应用与性能优化

闭包简述

根据Mozilla的官方解释，闭包是指一个函数与其周围状态（即词法环境）引用的捆绑组合。简单来说，闭包允许内部函数访问其外层函数的作用域。在JavaScript中，只要创建了一个函数，闭包便会随之生成。这里的“词法”指的是变量在源代码中的声明位置决定了其可用范围，即词法作用域。

个人理解：闭包的核心价值在于模拟私有属性，使内部函数能够访问外部函数的变量。除非必要，否则应避免过度使用闭包。

1. 闭包使内部函数能够访问外部函数的属性（包括变量和方法）

这种机制有时能带来便利，例如通过在外层函数中声明变量来替代全局变量。以下是一个在设备视口大小改变时重置ECharts图表的示例。

// 设备视口大小改变时，重置 echarts
let timer = null
window.onresize = function () {
  // 简单的防抖动处理
  if (timer) clearTimeout(timer)
  timer = setTimeout(() => {
    console.log(timer)
    chart.resize()
  }, 500)
}

此外，还可以考虑使用闭包方式来处理全局变量timer，从而避免污染全局作用域，具体实现如下。

window.onresize = this.debounce(() => {
  chart.resize()
}, 500)

function debounce (fn, delay = 500) {
  let timer = null
  return (p) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn(p)
    }, delay)
  }
}

2. 闭包的广阔应用场景

闭包的广泛适用性体现在任何需要使用仅包含一个方法的对象的场景中，此时均可使用闭包替代。

由于闭包允许将函数与其操作的数据（环境）关联，这在概念上类似于面向对象编程。在面向对象编程中，对象允许将数据（属性）与一个或多个方法绑定。

在日常开发中，符合使用闭包的场景非常常见。凡是使用单方法对象的地方，都可以用闭包实现，且实现并不复杂。鉴于闭包是JavaScript的重要知识点，这种实用性使其成为值得掌握的技能。

然而，如果不熟悉闭包或有更优的替代方案，无需强行使用。虽然闭包只是众多解决方案中的一种，但作为JavaScript的核心概念，学习它是必要的，旨在为开发者提供更多选择。

3. 利用闭包模拟私有方法

JavaScript原生不支持类似Java的私有方法声明，但可以通过闭包来模拟。私有方法不仅限制了对代码的直接访问，还有效管理了全局命名空间，避免非核心方法干扰公共接口。

以下示例展示了如何使用闭包定义公共函数，并使其能够访问私有函数和变量。这种模式也被称为模块模式（Module Pattern）。

window.onload = () => {
  let Counter1 = makeCounter(); // 创建实例1
  let Counter2 = makeCounter(); // 创建实例2

  console.log(Counter1.value()); // value：0
  Counter1.add(); // 调用增加函数，执行加一
  console.log(Counter1.value()); // value：1

  console.log(Counter2.value()); // value：0

  // 注意，实例2的 value 没有受到实例1的影响，也就是说 Counter1 和 Counter2 各自独立。
  // 每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。
  // 然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

  // undefined，Counter1 无法直接访问私有项 privateNumber
  console.log(Counter1.privateNumber);
  // Counter1.changeBy is not a function，Counter1 无法直接访问私有项 changeBy
  console.log(Counter1.changeBy(10));

  // 问私有项无法被访问，这提示我们应关注到以这种方式使用闭包，
  // 提供了许多与面向对象编程相关的好处 —— 特别是数据隐藏和封装。
}

/// 声明一个模块：计数器，模块内部包含了两个模拟的私有项 privateNumber 和 changeBy，
// 并返回一个对象，对象内部包含三个属性，分别是 add(),reduce(),value()。
let makeCounter = function () {
  let privateNumber = 0;

  function changeBy (val) {
    privateNumber += val;
  }

  return {
    add: function () {
      changeBy(1);
    },
    reduce: function () {
      changeBy(-1);
    },
    value: function () {
      return privateNumber;
    }
  }
};

在该示例中，包含两个私有项：变量privateCounter和函数changeBy。这两项无法在函数外部直接访问，必须通过返回的三个公共匿名函数进行交互，从而实现了私有特性的模拟。

4. 从性能角度考虑，非必要不使用闭包

关于闭包的性能影响，虽然缺乏深入的数据证明，但这仍是一个值得重视的话题。

因此，引用Mozilla的相关观点：

如果特定任务不需要闭包，在其他函数内部创建函数是不明智的，因为闭包会对脚本的处理速度和内存消耗产生负面影响。

例如，在创建新对象或类时，方法通常应关联到对象的原型，而不是定义在对象的构造函数中。这是因为每次调用构造函数时，方法都会被重新赋值（即为每个对象创建重新赋值一次），导致性能损耗。

英文原文如下：

It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.

For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).

概括而言，非必要不使用闭包。虽然存在许多优秀的技术方案，闭包只是其中之一，但作为JavaScript的重要知识点，将其作为潜在解决方案之一进行学习是必要的。

至此，关于学习JavaScript中闭包注意事项的文章介绍完毕。如需了解更多JS闭包相关内容，请搜索本站往期文章或继续浏览相关文章，感谢支持！