JavaScript中的闭包|极客笔记

JavaScript中的闭包

1. 什么是闭包

在理解闭包之前，我们先来看一段简单的代码：

function outerFunction() {
  var name = "John";

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

  return innerFunction;
}

var closure = outerFunction();
closure(); // 输出：John

在上述代码中，outerFunction 是一个外部函数，其中声明了一个内部函数 innerFunction。innerFunction 内部使用变量 name，但是 name 并不是 innerFunction 自身的变量，而是在外部函数 outerFunction 的作用域中声明的变量。然后，outerFunction 返回 innerFunction。

当我们执行 outerFunction 并将其返回值赋给变量 closure 后，closure 实际上就是一个闭包。闭包是指一个函数，它能够访问并操作其自身作用域之外的变量。

在上面的示例中，closure 可以访问并打印出 outerFunction 中的 name 变量值，尽管 outerFunction 已经执行完毕。这是因为 innerFunction 形成了一个闭包，保存了对 outerFunction 作用域的引用。

2. 闭包的用途

闭包在 JavaScript 中被广泛用于以下几个方面：

2.1 封装变量

闭包可以用来创建私有变量，避免变量泄露到全局作用域中。例如：

function createCounter() {
  var count = 0;

  return {
    increment: function() {
      count++;
    },
    decrement: function() {
      count--;
    },
    getCount: function() {
      return count;
    }
  };
}

var counter = createCounter();
counter.increment();
counter.increment();
console.log(counter.getCount()); // 输出：2

在上述代码中，createCounter 函数返回了一个对象字面量，其中包含了 increment、decrement 和 getCount 三个方法。这三个方法都能访问并操作 createCounter 函数作用域中的 count 变量，但是 count 对于外部作用域是不可见的。这样，我们就实现了一个封装了私有变量的计数器。

2.2 延迟执行

通过闭包，可以实现一些需要延迟执行的操作。下面是一个示例：

function delayExecution(func, delay) {
  return function() {
    setTimeout(func, delay);
  };
}

function sayHello() {
  console.log("Hello!");
}

var delayedHello = delayExecution(sayHello, 2000);
delayedHello(); // 两秒后输出：Hello!

在这个示例中，delayExecution 函数接受一个函数和一个延迟时间，返回一个新的函数。这个新的函数会在延迟时间结束后执行传入的函数。

我们定义了 sayHello 函数，并通过调用 delayExecution 创建了一个新的函数 delayedHello，并将其赋给变量。当我们调用 delayedHello 时，实际上会在两秒后执行 sayHello 函数。

2.3 循环中的闭包

在循环中使用闭包时，我们需要注意一个常见的错误。考虑下面这个示例：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

预期的输出应该是 0、1、2、3、4，每隔一秒输出一个数字。然而，实际上会输出 5 个 5。这是因为在闭包中使用的变量 i 是对同一个外部作用域变量的引用，在循环结束时变量 i 的值已经变为 5。因此，当循环结束后，所有的定时器回调函数都会打印出最终的 i 值。

为了解决这个问题，我们可以使用立即调用函数表达式（IIFE）来创建一个新的作用域，使每个闭包都引用其自身的作用域中的变量。修改后的代码如下：

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}

在上述代码中，我们创建了一个立即调用的匿名函数，并在循环中立即调用它。这样，在每次迭代时，都会创建一个新的作用域，并将变量 i 的值作为参数传递给这个匿名函数。这样，每个闭包都可以正确地引用其自己的变量，解决了循环中的闭包问题。

3. 闭包的注意事项

闭包虽然功能强大，但是在使用时需要注意一些事项：

3.1 内存泄漏

闭包会导致某些变量无法被垃圾回收，从而可能导致内存泄漏。如果闭包中引用了大量的变量，而这些变量本应该在闭包执行完毕后被销毁，那么就会造成内存占用过高的问题。

为了避免内存泄漏，我们应该在不再需要闭包时手动解除对其的引用，让垃圾回收机制能够正常工作。

3.2 性能损耗

闭包相较于普通函数会占用更多的内存和执行时间。这是因为闭包需要保存其自身作用域以及外部作用域的引用，使得作用域链较长。若过度使用闭包，可能会造成性能上的损耗。

因此，在实际开发中，我们应该合理使用闭包，避免过度滥用。

4. 小结

闭包是 JavaScript 中的一个重要概念，它能够让函数访问并操作其自身作用域之外的变量。通过闭包，我们可以实现封装变量、延迟执行以及解决循环中的问题等。

然而，闭包也有一些需要注意的问题，如内存泄漏和性能损耗。我们需要在使用闭包时谨慎操作，避免出现不必要的问题。

JavaScript中的闭包