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

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

什么是闭包？

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

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

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

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

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

为什么需要闭包？

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

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

闭包的特点

闭包有以下特点：

1. 闭包可以访问它们所包含的函数中的变量。

2. 一般来说，一个函数返回之后，局部变量就会被释放，但闭包不同。闭包内部保留了对外部环境的引用，当外部环境变量被修改后，闭包获得的变量值也会跟着改变。

3. 当函数被调用时，每次都会生成一个新的闭包。

例子一：计数器

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

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 的值。

结论

闭包是 JavaScript 中非常重要但又难以理解的概念。了解闭包能够帮助我们在编写代码时更好地控制数据的作用域和可访问性，这样就可以有效提高代码的可读性和可维护性。