深入理解JavaScript闭包

目录

1. 作用域

闭包和作用域这两个概念密切相关，所以在说闭包之前，先来看一下作用域的概念。

每一种编程语言，它最基本的能力都是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改。那么有了变量之后，应该把它放在那里、程序如何找到它们？是否需要提前约定好一套存储变量、访问变量的规则？这套规则就是作用域。

要想理解作用域的实现机制，需要结合 JS 的编译原理来看。先来看一个声明语句：

var name = 'hello'

在 JS 引擎眼里，这个语句包含了两个声明：

• var name （编译时处理）
• name = ‘hello’ （运行时处理）

何为编译时、何为运行时？难道 JS 不是不存在编译阶段的 “动态语言” 吗？事实上，JS 也是有编译阶段的，它和传统语言的区别在于，JS 不会早早地把编译工作做完，而是一边编译一边执行。简单来说，所有的 JS 代码片段在执行之前都会被编译，只是这个编译的过程非常短暂（可能就只有几微妙、或者更短的时间），紧接着这段代码就会被执行。

在编译阶段和执行阶段阶段发生了如下这些事：

• 编译阶段：这时登场的是编译器。编译器会找遍当前作用域，看看是不是已经有一个叫 name 的变量。如果有，那么就忽略 var name 这个声明，继续编译下去；如果没有，则在当前作用域里新增一个 name。然后，编译器会为引擎生成运行时所需要的代码，程序就进入了执行阶段。
• 执行阶段：这时登场的是JS 引擎。JS 引擎在执行代码的时候，仍然会找遍当前作用域，看看是不是有一个叫 name 的变量。如果能找到，就给它赋值。如果找不到，就会从当前作用域里向上层作用域逐级查找。如果最终仍然找不到 name 变量，引擎就会抛出一个异常。

这里，JS引擎的查找过程 就是作用域链。

在JavaScript中，作用域指的是变量能够被访问到的范围， 在 JavaScript 中作用域也分为好几种，ES6 之前只有全局作用域和函数作用域两种。ES6 出现之后，又新增了块级作用域，下面这来看看这几个概念。

（1）全局作用域

在编程语言中，不论 Java、C++也好，JavaScript 也罢，变量一般都会分为全局变量和局部变量两种。那么变量定义在函数外部，代码最前面的一般情况下都是全局变量。

在 JavaScript 中，全局变量是挂载在 window 对象下的变量，所以在网页中的任何位置都可以使用并且访问到这个全局变量。下面来看一下全局的作用域：

var globalName = 'global';
function getName() { 
  console.log(globalName) // global
  var name = 'inner'
  console.log(name) // inner
} 
getName();
console.log(name); // 
console.log(globalName); //global
function setName(){ 
  vName = 'setName';
}
setName();
console.log(vName); // setName
console.log(window.vName) // setName

可以看到，globalName 这个变量在任何地方都是可以被访问到的，所以它就是全局变量。而在 getName 函数中作为局部变量的 name 变量是不具备这种能力的。

在 JavaScript 中，所有没有经过定义而直接被赋值的变量默认就是一个全局变量，比如上面代码中 setName 函数里面的 vName 变量一样。

可以发现，全局变量也是拥有全局的作用域，无论在何处都可以使用它，在浏览器控制台输入 window.vName 的时候，就可以访问到 window 上所有全局变量。当然全局作用域有相应的缺点，当定义很多全局变量的时候，会容易引起变量命名的冲突，所以在定义变量时应该注意作用域的问题。

（2）函数作用域

在 JavaScript 中，函数中定义的变量叫作函数变量，这时只能在函数内部才能访问到它，所以它的作用域也就是函数的内部，称为函数作用域。

function getName () {
  var name = 'inner';
  console.log(name); //inner
}
getName();
console.log(name);

可以看到，name 这个变量是在 getName 函数中进行定义的，所以 name 是一个局部的变量，它的作用域就是在 getName 这个函数里边，也称作函数作用域。

除了这个函数内部，其他地方都是不能访问到它的。同时，当这个函数被执行完之后，这个局部变量也相应会被销毁。所以你会看到在 getName 函数外面的 name 是访问不到的。

（3）块级作用域

ES6 中新增了块级作用域，最直接的表现就是新增的 let 和 const 关键词，使用这两个关键词定义的变量只能在块级作用域中被访问，有“暂时性死区”的特点，也就是说这个变量在定义之前是不能被使用的。

说到暂时性死区，还需要从“变量提升”说起，来看下面代码：

function foo() { 
  console.log(bar) 
  var bar = 3 
} 
foo()

上面代码会输出：undefined，原因是变量bar在函数内进行了提升。相当于：

function foo() { 
  var bar 
  console.log(bar) 
  bar = 3 
} 
foo()

但在使用 let声明时，会报错：Uncaught ReferenceError: bar is not defined。

function foo() { 
  console.log(bar) 
  let bar = 3 
} 
foo() // Uncaught ReferenceError: bar is not defined。

使用 let 或 const 声明变量，会针对这个变量形成一个封闭的块级作用域，在这个块级作用域当中，如果在声明变量前访问该变量，就会报 referenceError 错误；如果在声明变量后访问，则可以正常获取变量值：

function foo() { 
  let bar = 3 
  console.log(bar) 
} 
foo()

这段代码正常输出 3。因此在相应花括号形成的作用域中，存在一个“死区”，起始于函数开头，终止于相关变量声明的一行。在这个范围内无法访问 let 或 const 声明的变量。

说完暂时性死区，下面来看看块级作用域。

在 JS 编码过程中 if 语句及 for 语句后面 {…} 这里面所包括的就是块级作用域。

console.log(a) //a is not defined
if(true){
  let a = '123'；
  console.log(a)； // 123
}
console.log(a) //a is not defined

可以看到，变量 a 是在 if 语句{…} 中由 let 关键词进行定义的变量，所以它的作用域是 if 语句括号中的那部分，而在外面进行访问 a 变量是会报错的，因为这里不是它的作用域。所以在 if 代码块的前后输出 a 这个变量的结果，控制台会显示 a 并没有定义。

2. 闭包

（1）闭包的概念

看完作用域的概念，下面来看一下闭包的概念，下面是MDN中对闭包的定义：

一个函数和对其周围状态的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。

通俗来讲，闭包就是：闭包其实就是一个可以访问其他函数内部变量的函数。即一个定义在函数内部的函数，或者直接说闭包是个内嵌函数也可以。

通常情况下，函数内部变量是无法在外部访问的（即全局变量和局部变量的区别），因此使用闭包的作用，就具备实现了能在外部访问某个函数内部变量的功能，让这些内部变量的值始终可以保存在内存中。

function fun1() {
  var a = 1;
  return function(){
    console.log(a);
  };
}
fun1();
var result = fun1();
result();  // 1

这段代码在控制台中输出的结果是 1（即 a 变量的值）。可以发现，a 变量作为一个 fun1 函数的内部变量，正常情况下作为函数内的局部变量，是无法被外部访问到的。但是通过闭包，最后可以拿到 a 变量的值。

从直观上来看，闭包这个概念为 JavaScript 中访问函数内变量提供了途径和便利。这样做的好处很多，比如，可以利用闭包实现“模块化”；再比如，翻看 Redux 源码的中间件实现机制，也会发现（函数式理念）大量运用了闭包。

（2）闭包产生的原因

上面说了作用域的概念，我们还需要知道作用域链的基本概念。当访问一个变量时，代码解释器会首先在当前的作用域查找，如果没找到，就去父级作用域去查找，直到找到该变量或者不存在父级作用域中，这样的链路就是作用域链。

需要注意，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条。

1. var a = 1;
2. function fun1() {
3.   var a = 2
4.   function fun2() {
5.     var a = 3;
6.     console.log(a);//3
7.   }
8. }

可以看到，fun1 函数的作用域指向全局作用域（window）和它自己本身；fun2 函数的作用域指向全局作用域 （window）、fun1 和它本身；而作用域是从最底层向上找，直到找到全局作用域 window 为止，如果全局还没有的话就会报错。

这就很形象地说明了什么是作用域链，即当前函数一般都会存在上层函数的作用域的引用，那么他们就形成了一条作用域链。

由此可见，闭包产生的本质就是：当前环境中存在指向父级作用域的引用。

function fun1() {
  var a = 2
  function fun2() {
    console.log(a);  //2
  }
  return fun2;
}
var result = fun1();
result();

可以看到，这里 result 会拿到父级作用域中的变量，输出 2。因为在当前环境中，含有对 fun2 函数的引用，fun2 函数恰恰引用了 window、fun1 和 fun2 的作用域。因此 fun2 函数是可以访问到 fun1 函数的作用域的变量。

那是不是只有返回函数才算是产生了闭包呢？其实也不是，回到闭包的本质，只需要让父级作用域的引用存在即可，因此可以这样修改上面的代码：

var fun3;
function fun1() {
  var a = 2
  fun3 = function() {
    console.log(a);
  }
}
fun1();
fun3();

可以看到，其中实现的结果和前一段代码的效果其实是一样的，就是在给 fun3 函数赋值后，fun3 函数就拥有了 window、fun1 和 fun3 本身这几个作用域的访问权限；然后还是从下往上查找，直到找到 fun1 的作用域中存在 a 这个变量；因此输出的结果还是 2，最后产生了闭包，形式变了，本质没有改变。

因此最后返回的不管是不是函数，也都不能说明没有产生闭包。

（3）闭包的应用场景

下面来看看闭包的表现形式及应用场景到底有哪些呢？主要有以下四种场景：

• 返回一个函数，上面讲原因的时候已经说过，这里就不赘述了。
• 在定时器、事件监听、Ajax 请求、Web Workers 或者任何异步中，只要使用了回调函数，实际上就是在使用闭包。

// 定时器
setTimeout(function handler(){
  console.log('1');
}，1000);
// 事件监听
$('#app').click(function(){
  console.log('Event Listener');
});

• 作为函数参数传递的形式。

var a = 1;
function foo(){
  var a = 2;
  function baz(){
    console.log(a);
  }
  bar(baz);
}
function bar(fn){
  // 这就是闭包
  fn();
}
foo();  // 输出2，而不是1

• IIFE（立即执行函数），创建了闭包，保存了全局作用域（window）和当前函数的作用域，因此可以输出全局的变量。

var a = 2;
(function IIFE(){
  console.log(a);  // 输出2
})();

IIFE 是一种自执行匿名函数，这个匿名函数拥有独立的作用域。这不仅可以避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域。

3. 解决循环输出问题

把闭包和循环体结合起来考察，是闭包最为经典的一种命题方式。在一些面试中，循环输出就是经常被问到的问题，代码如下：

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

这段代码输出的结果是 5 个 6，那为什么都是 6 呢？如何才能输出 1、2、3、4、5 呢？

我们可以结合以下两点来思考第一个问题：

• setTimeout 为宏任务，由于 JS 中单线程 eventLoop 机制，在主线程同步任务执行完后才去执行宏任务，因此循环结束后 setTimeout 中的回调才依次执行。
• 因为 setTimeout 函数也是一种闭包，往上找它的父级作用域链就是 window，变量 i 为 window 上的全局变量，开始执行 setTimeout 之前变量 i 已经就是 6 了，因此最后输出的连续就都是 6。

那如何按顺序依次输出 1、2、3、4、5 呢？

（1）利用 IIFE

可以利用 IIFE（立即执行函数），当每次 for 循环时，把此时的变量 i 传递到定时器中，然后执行，改造之后的代码如下。

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

可以看到，通过这样改造使用 IIFE（立即执行函数），可以实现序号的依次输出。

（2）使用 ES6 中的 let

ES6 中新增的 let 定义变量的方式，使得 ES6 之后 JS 发生革命性的变化，让 JS 有了块级作用域，代码的作用域以块级为单位进行执行。

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

可以看到，通过 let 定义变量的方式，重新定义 i 变量，则可以用最少的改动成本，解决该问题。

（3）定时器传入第三个参数

setTimeout 作为经常使用的定时器，它是存在第三个参数的我们经常使用前两个，一个是回调函数，另外一个是时间，而第三个参数用得比较少。那么结合第三个参数，调整完之后的代码如下：

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

可以看到，第三个参数的传递，可以改变 setTimeout 的执行逻辑，从而实现想要的结果，这也是一种解决循环输出问题的途径。