闭包,一说起这个词,很多人觉得就很难理解,或者说很难记住,那是因为对于该词的解释版本太多了,导致你都不知道哪个是正确的解释
一、定义
从理论角度:闭包是指那些能够访问自由变量的函数,所以说所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此,因为函数中访问全局变量就相当于是在访问自由变量,这个时候使用最外层的作用域,所以从理论的角度,所有函数都算是闭包
从实践角度:以下函数才算是闭包:
- 即使创建它的上下文已经销毁,它仍然存在(比如,内部函数从父函数中返回)
- 在代码中引用了自由变量
根据这个定义,我们来看个例子:
var name= "global name";
function showName(){
var name = "local name";
function fn(){
return name;
}
return fn;
}
var foo = showName();
foo();
首先我们分析下其执行上下文和执行上下文栈的变化情况:
- 进入全局代码,创建全局执行上下文,全局执行上下文会被压入执行上下文栈中
- 全局执行上下文初始化,会创建全局环境的活动对象VO,这个全局活动对象VO会保存name的值,即global.VO.name=‘global name’
- 创建showName函数,此时函数内部的[[scope]]属性会保存其父级活动变量的值,也就是showName.[[scope]] = [global.VO]
- 执行showName函数时,会创建该函数的执行上下文,然后将该执行上下文压入执行上下文栈中,此时执行上下文栈中有两个值了,一个是刚才的全局执行上下文,还有一个就是新加的showName函数的执行上下文
- 在showName函数执行上下文分析阶段时会创建作用域、this、活动变量,其中作用域的值就是该函数内部[[scope]]指向的内容,活动变量包含了arguments、变量(name=’undefined‘)、函数fn,创建了活动变量后,紧接着会将该函数的活动变量压入到 函数作用域链顶端,所以此时函数作用域链为[showName AO, global.VO]
- 到了函数执行上下文执行阶段,会根据具体代码的值更新活动变量中的值,此时fn函数被定义,同样它内部的[[scope]]属性也会保存父级活动变量的值,即fn.[[scope]]=[showName.AO,global.VO]
- showName函数执行完毕后,返回了一个函数fn,此时执行上下文栈中会将showName函数的执行上下文弹出
- 最后执行foo(),其实也就是执行fn函数,此时就会创建fn函数的执行上下文,然后将该执行上下文压入执行上下文栈中,此时执行上下文栈中只有fn函数的执行上下文、以及全局执行上下文
- 然后,创建完fn执行上下文后,同样也会进行其内部作用域链、this、活动变量的创建,同上步骤,fn函数作用域链为[fn.AO,showName.AO,global.VO ],最后打印name值时,会先在fn函数的活动变量中找,没有,就会沿着作用域链,去showName.AO中找,找到了local name,就不会继续往上找,所以最终打印结果就是local name
以上就是具体的执行分析过程,如果对以上内容还不是很了解的同学,可以先去看下我的那篇关于执行上下文的博文 js基础-执行上下文/执行上下文栈
了解了这整个过程,我们应该思考一个问题,那就是:
当 fn 函数执行的时候,showName 函数上下文已经被销毁了啊(即从执行上下文栈中被弹出),怎么还会读取到 showName 作用域下的 name 值呢?
那是因为刚才说了,fn函数依然可以通过 fn 函数的作用域链找到name变量,正是因为 JavaScript 做到了这一点,从而实现了闭包这个概念。
面试必刷题
接下来,看一下这道面试必考的闭包题:
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
}
data[0]();
data[1]();
data[2]();
答案是都是 3,让我们分析一下原因:
当执行到 data[0] 函数之前,此时全局上下文的 VO 为:
globalContext = {
VO: {
data: [...],
i: 3
}
}
当执行 data[0] 函数的时候,data[0] 函数的作用域链为:
data[0]Context = {
Scope: [AO, globalContext.VO]
}
data[0]Context 的 AO 并没有 i 值,所以会从 globalContext.VO 中查找,i 为 3,所以打印的结果就是 3。
data[1] 和 data[2] 是一样的道理。
我们改成闭包看看:
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = (function (i) {
return function(){
console.log(i);
}
})(i);
}
data[0]();
data[1]();
data[2]();
当执行到 data[0] 函数之前,此时全局上下文的 VO 为:
globalContext = {
VO: {
data: [...],
i: 3
}
}
当执行 data[0] 函数的时候,data[0] 函数的作用域链发生了改变:
data[0]Context = {
Scope: [AO, 匿名函数Context.AO globalContext.VO]
}
匿名函数执行上下文的AO为:
匿名函数Context = {
AO: {
arguments: {
0: 0,
length: 1
},
i: 0
}
}
data[0]Context 的 AO 并没有 i 值,所以会沿着作用域链从匿名函数 Context.AO 中查找,这时候就会找 i 为 0,找到了就不会往 globalContext.VO 中查找了,即使 globalContext.VO 也有 i 的值(值为3),所以打印的结果就是0。
data[1] 和 data[2] 是一样的道理。