闭包的概念
什么是闭包(Closure)?
网上流传各种说法,在Javascript语言中,我的了解是:保留着其余函数外部变量的函数,就是闭包。
挺绕的,但不虚,让咱们一步步揭开它的神秘面纱!
前置概念
要了解闭包,咱们得先搞清楚以下几个概念:
作用域(Scope)
执行环境(Execution Context)
流动对象 (Activation object)
作用域链 (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中,每当一个函数被执行,都会产生三个对象:
- 以后执行环境(Execution Context):这个对象会被压入“执行环境栈”;
- 关联的流动对象(Activation Object):该对象存储了函数的this、传递的参数以及函数内定义的所有变量和办法;
- 关联的作用域链(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 变量!这就是闭包。