闭包的概念

什么是闭包(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中,我感觉更靠近实质的定义应该如下:外部函数的作用域链仍放弃着对外部函数流动对象的援用,就是闭包。