图解 Javascript 核心概念之闭包

闭包的概念

什么是闭包（Closure）？
网上流传各类说法，在Javascript语言中，个人理解是：

保存着其余函数内部变量的函数，就是闭包。

挺绕的，但不虚，让咱们一步步揭开它的神秘面纱！

前置概念

要理解闭包，咱们得先搞清楚如下几个概念：

1. 做用域（Scope）
2. 执行环境（Execution Context）
3. 活动对象 (Activation object)
4. 做用域链 (Scope Chain)

咱们先从做用域开始。

做用域

JS的做用域分两种：全局做用域、局部做用域（也可称为函数做用域）

ES6语法给Js增长了块做用域，由于不是本文重点，因此省略。

全局做用域：在最外层定义的变量拥有全局做用域，对于全部内部函数，都是能够访问的。例如：

var a = 'global';
function func() {
    console.log(a);
}
func(); // 结果为：global
复制代码

局部/函数做用域：在函数内部定义的变量，通常只能在函数内部被访问。例如：

var a = 'global';
function func() {
    var b = 'local';
}
func();
console.log(b); // 报错，innerVar is not defined;
复制代码

总的来讲，Js做用域的通常机制就是：

内部可访问外部的变量，外部没法访问内部的变量。

执行环境 & 做用域链 & 活动对象

那么这套做用域机制是如何实现的呢？答案是：经过做用域链
在Js中，每当一个函数被执行，都会产生三个对象：

1. 当前执行环境（Execution Context）：这个对象会被压入“执行环境栈”；
2. 关联的活动对象（Activation Object）：该对象存储了函数的this、传递的参数以及函数内定义的全部变量和方法；
3. 关联的做用域链（Scope Chain）：做用域链会存储在当前执行环境的内部属性([scope])中。它的第0位，始终指向当前执行环境的活动对象。

文字描述很繁琐，咱们经过实例配图讲解，例若有以下 js 文件：

// example.js 文件
var a = 'global';
function func() {
    console.log(a);
}
func(); // 结果为：global
复制代码

当浏览器运行解析 example.js 后，首先建立了全局执行环境 （Window 对象）、Window 做用域链和 Global 全局活动对象，如图：

全局执行环境是最外围的执行环境，当浏览器关闭后才释放
全局活动对象 Global 不存在arguments属性，能够把它看做一个特殊的活动对象

接着，当 func 函数执行时，遵循相同机制会建立 func 执行环境、func 做用域链、func 活动对象，如图：

接下来，当执行到 console.log(a) 时，首先会去找做用域链第0位，发现 func 活动对象没有 a 变量，随后沿着做用域链找第1位，发现指向的 Global 对象有 a，所以输出其值 “global”。

最后，当 func 函数执行完毕，其执行环境被环境栈弹出，func 执行环境对象、func 做用域链、func 活动对象所有随之销毁。

闭包实例

搞明白了做用域链，离弄清楚什么是闭包就仅一步之遥了！ 咱们来看看下面这个实例：

function outer() {
    var a = 'Hi Closure';
    function inner() {
        return a;
    }
    return inner;
}
var func = outer();
console.log(func()); // Hi Closure
复制代码

当执行 var func = outer(); 时，状况如图：

到这里须要特别注意两点：

1. outer() 返回了一个 inner 函数，在调用 outer 时，inner 函数的做用域链和活动对象都已经被初始化了
2. outer() 执行完毕后，其执行环境被环境栈弹出，做用域链被销毁。但它的活动对象并无被销毁，而是一致保存在内存中。由于 outer 活动对象被 inner 做用域链所引用。

接下来，当执行 console.log(func())时, 状况如图：

到这步，一个典型的闭包造成，神奇的事情发生了。 按照通常的状况， 外部是没法访问函数内部变量的，即 outer 函数内部的 a 变量，对外是不可访问的。但上例中， 因为 inner 函数的做用域链保留了对 outer 函数活动对象的引用，使得咱们在外部可以借助 inner 函数，访问到 a 变量。

这就是闭包。

总结

最后，咱们来回忆下开头对闭包概念的定义：

保存着其余函数内部变量的函数，就是闭包

其实在Js中，我以为更接近本质的定义应该以下：

内部函数的做用域链仍保持着对外部函数活动对象的引用，就是闭包

本文主要分享了我对闭包概念的理解思路，参考了阮一峰和mayday526的文章。其中涉及诸多前置概念，理解不免存在误差，望各路大神指正，感激涕零。

参考文章：

1. blog.csdn.net/whd526/arti…
2. www.ruanyifeng.com/blog/2009/0…