js

对于 JavaScript 开发者而言，闭包是一个非常重要的概念，也是面试中常常会被问到的问题。本篇博客将会详细介绍 JavaScript 中的闭包原理及其应用，并提供相关的代码示例和注释。

什么是闭包？

在 JavaScript 中，闭包是指一个函数能够访问其外部作用域中的变量，即使在函数执行完毕后，这些变量依然存在于内存中。换句话说，闭包是指函数可以“记住”其创建时的作用域，甚至在该作用域已经不存在的情况下，仍然可以使用其中的变量和函数。

以下是一个简单的闭包示例：

1
2
3
4
5
6
7
8
9
10
11
12
function outerFunction() {
  const outerVariable = "I am outside!";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const inner = outerFunction();
inner(); // 输出 "I am outside!"

在上面的代码中，我们定义了一个 outerFunction，它返回一个内部函数 innerFunction。在 innerFunction 中，我们可以访问外部函数中定义的 outerVariable，尽管它已经在 outerFunction 执行完毕后被销毁。当我们调用 inner 函数时，它仍然能够访问并输出 outerVariable。

闭包的原理

在 JavaScript 中，每当创建一个函数时，就会同时创建一个闭包。闭包由两部分组成：函数本身和一个包含函数中所有变量的对象，这个对象被称为“词法环境”（Lexical Environment）。当函数需要访问一个变量时，它会首先在自己的词法环境中查找，如果找不到，就会向上查找到其父级函数的词法环境，直到找到该变量或者抵达全局环境为止。

以下是一个更复杂的闭包示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function createCounter() {
  let count = 0;

  function counter() {
    count++;
    console.log(count);
  }

  return counter;
}

const myCounter = createCounter();
myCounter(); // 输出 1
myCounter(); // 输出 2

在上面的代码中，我们定义了一个 createCounter 函数，它返回一个内部函数 counter。在 counter 函数中，我们访问并修改了 createCounter 中定义的 count 变量。当我们调用 myCounter 函数时，它会输出当前的计数器值，并将其加 1。由于 createCounter 函数已经执行完毕，count 变量已经不存在于函数作用域中，但是 counter 函数仍然可以访问并修改该变量，这就是闭包的原理。

闭包的应用

闭包在 JavaScript 中有着广泛的应用，以下是一些常见的用例：

1. 实现私有变量和方法

由于 JavaScript 中没有真正意义上的私有变量和方法，我们可以利用闭包来实现该功能。将私有变量和方法定义在一个函数内部，然后返回一个访问该变量和方法的公共接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function createPerson(name) {
  let age = 0;

  function increaseAge() {
    age++;
  }

  function getAge() {
    return age;
  }

  return {
    name,
    getAge,
    celebrateBirthday: function() {
      increaseAge();
      console.log(`Happy ${getAge()}th birthday, ${name}!`);
    }
  };
}

const person = createPerson("Alice");
person.celebrateBirthday(); // 输出 "Happy 1st birthday, Alice!"
person.celebrateBirthday(); // 输出 "Happy 2nd birthday, Alice!"

在上面的代码中，我们定义了一个 createPerson 函数，它返回一个包含 name、getAge 和 celebrateBirthday 属性的对象。其中 age 变量和 increaseAge 函数都定义在 createPerson 函数内部，因此它们是私有的，并且只能通过返回的对象的公共接口访问。

2. 保存状态

闭包可以用于保存某个函数调用的状态。例如，我们可以定义一个函数，该函数返回一个新的函数，每次调用该函数时，新函数的状态都会被更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1(); // 输出 1
counter1(); // 输出 2
counter2(); // 输出 1

在上面的代码中，我们定义了一个 createCounter 函数，它返回一个新的函数。每次调用新函数时，计数器都会自增并输出当前的值。由于 createCounter 返回的是一个闭包，每次调用新函数时，都会访问 createCounter 中定义的 count 变量，因此每个计数器都有自己的状态。

3. 避免全局变量污染

闭包可以用于避免全局变量污染。通过将变量和函数定义在一个函数内部，可以避免它们与全局命名空间中的其他变量和函数发生冲突。

1
2
3
4
5
6
7
8
9
10
11
12
13
(function() {
  let message = "Hello, World!";

  function showMessage() {
    console.log(message);
  }

  window.myApp = {
    showMessage
  };
})();

myApp.showMessage(); // 输出 "Hello, World!"

在上面的代码中，我们使用了一个立即执行函数表达式（IIFE）来定义一个局部作用域，其中包含一个私有变量 message 和一个公共方法 showMessage。通过将 showMessage 方法添加到全局命名空间中，我们可以在其他地方访问它，而不必担心它会与其他全局变量冲突。

结论

闭包是 JavaScript 中一个非常重要的概念，它可以帮助我们实现许多有用的功能。在本文中，我们详细介绍了闭包的原理和应用，并提供了相关的代码示例和注释。希望本文能够帮助您更好地理解 JavaScript 中的闭包，并在日常开发中灵活运用它们。