闭包的定义:
闭包是指那些能访问自由变量的函数。
自由变量:
自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。
所以我们可以理解为闭包是由 函数 + 自由变量 组成的。
换句话说,闭包就是函数和被创建的函数中的作用域对象的组合。
所以在理论上所有JavaScript函数都是闭包。
ECMAScript中,闭包指的是:
在上一篇《深入理解JavaScript执行上下文》文章中使用过一个例子:
var scope = 'global scope'
function checkscope(){
var scope = 'local scope'
function f(){
return scope
}
return f
}
checkscope()()
这段代码的执行在上一篇文章有具体的分析,在这里我们可能会有一个疑问(分析可参考上一篇文章):
在f函数的执行上下文入栈之前,checkscope函数已经出栈,那么为什么还能读取scope的值呢?
其实我们看分析可以知道在f函数执行上下文中维护了一个作用域链
fContext = {
Scope: [AO, checkscopeContext.AO, globalContext.VO]
}
就是因为这条作用域链的存在,才使得f函数在checkscope函数执行上下文销毁后仍能读取checkscopeContext.AO中的值,因为f函数与checkscopeContext.AO存在引用关系,所以即使checkscope函数执行上下文已经销毁,但是checkscopeContext.AO仍活在内存中,f函数仍能通过作用域链找到scope的值。
for (var i = 0; i < 5 ; i++){
setTimeout(function fn() {
console.log(i)
}, 1000)
}
答案都是5,我们的预期是顺序输出0到4,和我们的预期不同。我们分析一下原因:
在执行定时器内fn函数之前,全局上下文的VO为:
globalContext = {
VO: {
i: 5
}
}
当fn函数执行时,fn函数的作用域链为:
fnContext = {
Scope: [AO, globalContext.VO]
}
在fnContext的AO中并没有i的值,所以会从globalContext.VO查找,而这时在globalContext.VO中i的值为5,所以最终打印出来的结果为5.
很多人会使用下面这种方法:
for (var i = 0; i < 5 ; i++){
setTimeout((function fn(i) {
console.log(i)
})(i), 1000)
}
我们发现输出的结果符合我们的预期,但是输出结果时并没有1s的延时。
这是因为在定时器内的第一个()是一个分组操作符,里面的函数fn为一个函数表达式而非函数声明,所以定时器内第一个参数相当于执行fn(i),并不会延时执行,这也就是我们常说的立即执行函数。
接下来我们继续使用闭包来解决这个问题:
for (var i = 0 ; i < 5 ; i++){
setTimeout((function(i) {
return function fn() {
console.log(i)
}
})(i), 1000)
}
我们在fn函数外层加一个立即执行函数并将i的值传入,这样就能够得到我们想要的答案,我们对比之前的fn函数执行时的作用域链:
fnContext = {
Scope: [AO, 匿名Context.AO, globalContext.VO]
}
在闭包中fn函数的作用域链中多了一个匿名函数的AO,在这个AO中便存有匿名函数执行时保存在AO中的i值。这样在匿名函数的AO中找到i的值,也就不会再去找globalContext.VO中i值。