关于javascript:Js闭包的原理图解

闭包的概念

什么是闭包（Closure）？
网上流传各种说法，在 Javascript 语言中，我的了解是：保留着其余函数外部变量的函数，就是闭包。
挺绕的，但不虚，让咱们一步步揭开它的神秘面纱！

前置概念

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

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

作用域

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

1. 全局作用域：在最外层定义的变量领有全局作用域，对于所有外部函数，都是能够拜访的。例如：

var a = 'global';
function func() {console.log(a);
}
func(); // 后果为：global

2. 部分 / 函数作用域：在函数外部定义的变量，个别只能在函数外部被拜访。例如：

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() 时，状况如图：

到这里须要特地留神两点：

• outer() 返回了一个 inner 函数，在调用 outer 时，inner 函数的作用域链和流动对象都曾经被初始化了
• outer() 执行结束后，其执行环境被环境栈弹出，作用域链被销毁。但它的流动对象并没有被销毁，而是统一保留在内存中。因为 outer 流动对象被 inner 作用域链所援用。

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

到这步，一个典型的闭包造成，神奇的事件产生了。
依照个别的状况，内部是无法访问函数外部变量的，即 outer 函数外部的 a 变量，对外是不可拜访的。但上例中，因为 inner 函数的作用域链保留了对 outer 函数流动对象的援用，使得咱们在内部可能借助 inner 函数，拜访到 a 变量！这就是闭包。

在 Js 中，我感觉更靠近实质的定义应该如下：外部函数的作用域链仍放弃着对外部函数流动对象的援用，就是闭包。