闭包的概念
什么是闭包(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 变量!这就是闭包。
在Js中,我觉得更接近本质的定义应该如下:内部函数的作用域链仍保持着对外部函数活动对象的引用,就是闭包。