全面理解JavaScript中的闭包

2023年6月10日下午8:03 • JavaScript

闭包（Closure）是JavaScript中非常重要的一个概念，由于其灵活性和特殊性，很多初学者和部分开发者难以理解。理解闭包的概念对于攻克JavaScript的高级知识和框架有很大帮助。下面是全面理解JavaScript中的闭包的完整攻略：

一、什么是闭包

闭包指的是能够访问自由变量（非全局变量，即在外层函数中定义的变量）的函数。换句话说，如果一个函数内部定义了另一个函数，并且该内部函数使用了外部函数的局部变量或参数，且该内部函数被外部函数返回或涉及到异步操作，那么该内部函数就形成了一个闭包。

二、闭包的特点

闭包具有以下特点：

保护变量：闭包的内部函数可以访问外部函数中的变量和参数。这保护了变量不受外部干扰，从而增加了JavaScript程序的健壮性。
模块化编程：闭包使得JavaScript程序可以使用模块化编程，即将一个较大的问题划分为多个小问题进行解决，每个小问题通过一个闭包的形式独立处理，最终将小问题的结果汇总成为解决较大问题的结果。
保存状态：闭包还可以用于保存状态，在函数执行完毕后仍然可以保存函数调用时的状态信息。这意味着在异步操作中，可以使用闭包记录一些状态信息，供回调函数所使用。

三、闭包的实现

闭包的实现有两种形式：

函数表达式：通过在函数内部定义函数表达式，从而形成闭包。

function outerFunction() {
  var a = 10; // 自由变量a
  return function innerFunction() {
    console.log(a); // 访问自由变量a
  }
}
var innerFunc = outerFunction();
innerFunc(); // 输出结果：10

紧接着内部函数innerFunction声明时使用的自由变量a是在外部函数outerFunction中定义的，但内部函数所处的环境是在外部函数outerFunction的原始执行上下文被弹出栈的后，因此访问的仍然是外部函数定义的变量值。

对象方法：将闭包作为对象方法来使用。

var myObject = {
  a: 10,
  getA: function() {
    var self = this;
    return function(){
      console.log(self.a);
    }
  }
}
var innerFunc = myObject.getA();
innerFunc(); //输出结果：10

上述示例中，由于内部函数innerFunc作为了对象方法被使用，因此闭包内部的this指向了myObject对象，从而在内部函数中可以访问到对象属性中的值。

四、闭包的使用

闭包常见的使用场景包括：

封装变量

闭包可以用来封装特定的功能，并通过返回一个函数或对象将其暴露出去。通过这种方式，可以实现许多面向对象编程的思想，例如数据私有和公共方法。

var Counter = (function() {
  var count = 0;
  return {
    increment: function() {
      count += 1;
    },
    decrement: function() {
      count -= 1;
    },
    value: function() {
      return count;
    }
  }
})();
Counter.increment();
Counter.increment();
console.log(Counter.value()); // 输出结果：2

在这个示例中，Counter对象实际上是一个闭包，它将count私有变量保存在内部，并通过暴露的方法increment、decrement、value来操作和获取该私有变量。

迭代器

闭包可以被用于迭代器的实现，使得函数既可以返回结果，也可以保持其状态。通过闭包，可以有效地存储变量的状态，从而允许下一次迭代时继续使用该状态。

function createIncrementor(start) {
  return function() {
    start += 1;
    return start;
  }
}
var increment = createIncrementor(0);
console.log(increment()); // 输出结果：1
console.log(increment()); // 输出结果：2
console.log(increment()); // 输出结果：3

在这个示例中，createIncrementor函数返回了一个闭包内部函数（即增量器increment），该闭包中包含了变量start的状态信息。每次调用该闭包函数时，变量start会加1。