JavaScript 中的闭包|极客笔记

JavaScript 中的闭包

在 JavaScript 中，闭包是一个非常重要的概念。它可以帮助我们实现很多有趣的功能和特性。本文将详细解释闭包的概念、工作原理以及它在实际开发中的应用。

什么是闭包？

闭包是指在一个函数内部定义的函数，它可以访问外部函数的变量，并将其保存在自己的作用域链中。换句话说，闭包可以使一个函数访问到它自己的外部作用域中的变量。

我们来看一个简单的示例来理解闭包：

function outer() {
  var outerVariable = 'Hello, ';

  function inner() {
    var innerVariable = 'world!';
    console.log(outerVariable + innerVariable);
  }

  return inner;
}

var closure = outer();
closure(); // 输出：Hello, world!

在这个示例中，函数 outer 内部定义了一个内部函数 inner，并返回了这个函数。当我们调用 outer 的时候，它返回了 inner 这个函数，并将其赋值给了变量 closure。然后我们再调用 closure，它输出了 Hello, world!。

可以注意到，在 outer 的内部，inner 函数访问了外部函数 outer 的变量 outerVariable。这就是闭包的一个重要特性：内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。

闭包的工作原理

了解闭包的工作原理对于理解它的实际应用非常重要。当一个函数被定义时，它的作用域链就被创建了。作用域链是一个包含所有外部环境的关联列表，每个外部环境都有一个指向其父级环境的引用。当函数被调用时，一个新的执行环境被创建，并且函数的作用域链被复制到该执行环境中。

我们再来看一个示例来理解作用域链的概念：

function outer() {
  var outerVariable = 'Hello, ';

  function inner() {
    var innerVariable = 'world!';
    console.log(outerVariable + innerVariable);
  }

  return inner;
}

var closure = outer();
closure(); // 输出：Hello, world!

在这个示例中，当 outer 函数被调用时，一个新的执行环境被创建，并且其作用域链中包含了 outer 的变量 outerVariable。inner 函数被定义在 outer 函数内部，它也继承了 outer 的作用域链。因此，当我们调用 closure 函数时，它可以访问到 outerVariable 变量。

闭包的应用场景

闭包有很多实际应用场景。下面介绍几个常见的应用：

封装私有变量

由于 JavaScript 的函数作用域特性，我们可以使用闭包来模拟私有变量。这在模块化开发中非常有用，可以防止外部代码意外修改内部变量。

function counter() {
  var count = 0;

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

var increment = counter();
increment(); // 输出：1
increment(); // 输出：2
increment(); // 输出：3

在这个示例中，counter 函数返回了一个内部函数，它可以访问并修改 count 变量。我们将 counter 函数赋值给 increment 变量，然后每次调用 increment，都会输出递增的值。

缓存计算结果

闭包还可以用于缓存计算结果，减少重复计算的开销。这对于一些计算成本较高的函数非常有用。

function expensiveCalculation() {
  var cache = {};

  return function(n) {
    if (n in cache) {
      return cache[n];
    }

    var result = // expensive calculation
    cache[n] = result;
    return result;
  }
}

var calculate = expensiveCalculation();
console.log(calculate(5)); // 输出：计算结果
console.log(calculate(5)); // 输出：缓存结果

在这个示例中，expensiveCalculation 函数返回了一个接受参数 n 的内部函数，它先检查 cache 对象是否已经缓存了该结果，如果存在则直接返回缓存结果；否则进行计算，并将计算结果存入 cache 中。

实现函数记忆

闭包还可以实现一种称为函数记忆（Memoization）的技术。函数记忆是一种优化技术，用于存储函数的输入参数和输出的映射关系。

function memoize(func) {
  var cache = {};

  return function(n) {
    if (n in cache) {
      return cache[n];
    }

    var result = func(n);
    cache[n] = result;
    return result;
  }
}

function expensiveCalculation(n) {
  // expensive calculation
}

var calculate = memoize(expensiveCalculation);
console.log(calculate(5)); // 输出：计算结果
console.log(calculate(5)); // 输出：缓存结果

在这个示例中，我们定义了一个 memoize 函数，它接受一个函数作为参数，并返回一个新的函数。新的函数会先检查 cache 对象是否已经缓存了该结果，如果存在则直接返回缓存结果；否则调用原始函数进行计算，并将计算结果存入 cache 中。