一文搞懂JavaScript中最难理解概念之一的闭包

闭包（closure）在 JavaScript 中是一个非常重要的概念，也是最难理解的。本文将详细解释什么是闭包、为什么需要闭包以及闭包有哪些特点。同时，给出两个简单的闭包示例，帮助你更好地理解闭包。

什么是闭包？

在最简单的形式下，闭包是一个词法作用域内，能够引用自由变量的函数。

这里需要解释一下自由变量。自由变量指的是在函数中使用的变量，但不是函数的参数也不是函数内部声明的变量。例如：

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

在这个函数中，x 是一个参数，而 y 是一个自由变量。

如果一个函数可以访问到其他函数的作用域中的变量，那么这个函数就被称为闭包。在内部函数可以访问到外部函数定义的变量时，就形成了闭包。

为什么需要闭包？

使用闭包，可以使变量不被释放，搭配IIFE可以实现模块化的代码结构，增加代码的可读性和可维护性。

另外，闭包还可以用于解决作用域相关的问题。在 JS 中函数作用域是静态的，意味着变量在声明的时候就分配了内存空间，而不是在执行的时候。所以，变量的作用域就是在函数父级作用域的整个生命周期中，而不是在函数执行完毕后立即销毁。

闭包的特点

闭包有以下特点：

闭包可以访问它们所包含的函数中的变量。
一般来说，一个函数返回之后，局部变量就会被释放，但闭包不同。闭包内部保留了对外部环境的引用，当外部环境变量被修改后，闭包获得的变量值也会跟着改变。
当函数被调用时，每次都会生成一个新的闭包。

例子一：计数器

第一个示例是一个计数器，需要一个函数来返回另外一个函数，由此创建一个计数器。每次调用返回的函数都会增加计数器的值。

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const c = counter();

c(); // 1
c(); // 2
c(); // 3

在这个例子中，返回的函数可以访问外部闭包中的变量 count，每一次调用返回的函数，因为可以访问外部环境中的变量，所以可以持续记录 count 的值。

例子二：模块化的代码结构

第二个示例中，用闭包实现模块化的代码结构。这个模块包含了两个函数：一个用来设置一个计数器的初始值，另一个用来给这个计数器增加值。

const counter = (function () {
  let count = 0;

  function changeCount(val) {
    count += val;
  }

  function setCount(val) {
    count = val;
  }

  function getCount() {
    return count;
  }

  return {
    change: changeCount,
    set: setCount,
    get: getCount,
  };
})();

counter.set(10);
counter.change(5);
console.log(counter.get()); // 15

在这个例子中，定义了一个 IIFE，函数体内有几个变量（这里仅有 count），以及多个能够访问这些变量的函数。这些函数被返回并成为 counter 对象的属性，由此创建了一个模块。由于变量 count 不会被释放，多次调用 counter 的方法将持续记录 count 的值。