一文彻底搞懂js-闭包：深入理解闭包概念、作用及代码实现

2023-11-12 14:07:27

闭包的概念和原理

在JavaScript中，闭包是指一个函数和对其周围状态（又称词法环境）的引用捆绑在一起。当函数被定义时，它会捕获其父级作用域中的变量并将其存储在自己的内存空间中。即使父级作用域被销毁，函数仍然可以访问这些捕获的变量，而这些变量就被称为闭包变量。

举个简单的例子，我们定义一个函数：

function outer() {
  let x = 10;

  function inner() {
    console.log(x);
  }

  return inner;
}

在这个例子中，函数inner是函数outer的内部函数。当函数outer被调用时，它会创建一个词法环境，并将变量x存储在该环境中。函数inner被定义后，它捕获了对变量x的引用。即使函数outer执行完毕，函数inner仍然可以访问变量x，因为变量x被存储在函数inner的词法环境中。这就是闭包形成的基本原理。

2. 闭包的作用和应用

闭包在JavaScript中发挥着重要作用，可以实现多种强大的功能：

封装性： 闭包可以将数据和行为封装在一个函数中，从而提高代码的可维护性和重用性。
数据共享： 闭包允许在不同的函数之间共享数据，即使这些函数在不同的作用域中定义。
状态管理： 闭包可以保存状态信息，以便在后续调用中使用。
异步编程： 闭包可以在异步操作（如回调函数）中捕获变量，从而实现跨时间的数据传递。

闭包在实际开发中有着广泛的应用，以下是一些常见的例子：

事件处理： 闭包可以用来为元素添加事件处理函数，即使这些元素在事件发生后被移除。
私有变量： 闭包可以用来在构造函数内部创建私有变量，从而实现数据的封装。
模块化编程： 闭包可以用来实现模块化编程，将代码组织成独立的模块，提高代码的可读性和可维护性。
延迟执行： 闭包可以用来延迟函数的执行，直到满足某些条件。

3. 闭包的代码实现

闭包的实现主要依赖于JavaScript的词法作用域和函数执行上下文的概念。词法作用域是指函数的词法环境，它决定了函数可以访问哪些变量。函数执行上下文是指函数执行时所处的作用域环境，它包含了函数的参数、局部变量以及对外部变量的引用。

当函数被调用时，它会创建一个新的执行上下文，并将其推入执行上下文栈。这个执行上下文包含了函数的参数、局部变量以及对外部变量的引用。当函数执行完毕后，它的执行上下文会被从执行上下文栈中弹出。

如果函数内部存在闭包变量，那么即使函数执行完毕，它的执行上下文也不会被销毁，而是会被保留在内存中。这是因为闭包变量被存储在函数的词法环境中，而词法环境是不会随着函数的执行而改变的。

function outer() {
  let x = 10;

  function inner() {
    console.log(x);
  }

  return inner;
}

let innerFunc = outer();
innerFunc(); // 输出：10

在这个例子中，当函数outer被调用时，它会创建一个词法环境并将其推入执行上下文栈。词法环境包含了变量x。函数inner被定义后，它捕获了对变量x的引用。当函数outer执行完毕后，它的执行上下文被弹出，但闭包变量x仍然存在于内存中，因为变量x被存储在函数inner的词法环境中。当函数inner被调用时，它会访问词法环境中的变量x并输出其值。