MDN对闭包的定义:
闭包是指那些能够访问自由变量的函数
那什么是自由变量?
自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量
所有,闭包 = 函数 + 函数能访问到的自由变量
例如:
var a = 1
function foo() {
console.log(a)
}
foo()
foo函数可以访问变量a,但是a既不是函数参数也不是foo函数的局部变量,所有a是局部变量。
所以foo函数+ foo函数能访问的自由变量a就构成了一个闭包,但是和以前理解的闭包不太一样。
上述说的闭包是理论闭包,其实还有一个实践角度上的闭包:
ECMAScript中,闭包是指
1、从理论角度:所有的函数。因为它们都在创建的时候就将上层的上下文的数据保存起来了。哪怕是简单的全局变量也是如此,因为函数中访问全局变量就相当于是在访问自由变量,这个时候使用为外层的作用域。
2、从实践角度:以下函数才算是闭包:
(1)即使创建它的上下文已经销毁,它既然存在(比如,内部函数从父函数中返回)
(2)在代码中引用了自由变量
分析
var scope = 'global scope'
function checkscope() {
var scope = 'local scope'
function f() {
return scope
}
return f
}
var foo = checkscope()
foo()
分析下上述代码的执行过程:
- 进入全局代码,创建全局执行上下文,全局执行上下文压入执行上下文栈
- 全局执行上下文初始化
- 执行checkscope函数,创建checkscope函数执行上下文,checkscope执行上下文被压入执行上下文栈
- checkscope执行上下文初始化,创建变量对象、作用域链、this
- checkscope函数执行完毕,checkscope执行上下文从执行上下文栈中弹出
- 执行f函数,创建f函数执行上下文,f执行上下文被压入执行上下文栈
- f执行上下文初始化,创建变量对象、作用域链、this
- f函数执行完毕,f函数上下文从执行上下文栈中弹出
当了解了上述的过程之后,我们会发现一个问题,当f函数执行的时候,checkscope函数上下文已经被销毁了(执行上下文栈中弹出),怎么还能读取到checkscope中的scope的值呢?
当我们了解了具体的执行过程后,我们知道f执行上下文维护了一个作用域链:
fContext={
Scope: [AO, checkscopeContext.AO, globalContext.VO]
}
就是因为这个作用域链,f函数依然可以读取到checkscopeContext.AO的值,说明当f函数引用了checkscopeContext.AO中的值的时候,即使checkscopeContext被销毁了,但是JavaScript依然迥然checkscopeContext.AO活在内存中,f函数依然可以通过f函数的作用域链找到它,正是因为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
来看看闭包的实现方式:
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]函数的时候,data[0]函数的作用域链为:
data[0]Context: {
Scope: [AO, 匿名函数Context.VO, globalContext.VO]
}
匿名函数执行上下文的AO为:
匿名函数Context = {
AO: {
arguments: {
0: 0,
lenght: 1
},
i: 0
}
}
data[0]Context的AO并没有i值,所有会沿着作用域链从匿名函数Context.AO中查找,这时候就会找i为0,找到了就不会往globalContext.VO中查找了,即使globalContext.VO也有i的值(值为3),所有打印为0