JS 总结之闭包

4次阅读

共计 2508 个字符,预计需要花费 7 分钟才能阅读完成。

从《JS 总结之函数、作用域链》一文中知道作用域链的作用,保证了对所有变量对象的有序访问。
???? 问题
函数外的是无法访问函数内部的变量,有时候要用到怎么办?我们的主角,闭包就是可以解决这个问题。
???? 什么是闭包
引用 MDN 上的解释:
闭包是函数和声明该函数的词法环境的组合。
引用《JavaScript 高级程序设计(第 3 版)》上的解释:
闭包是指有权访问另一个函数作用域中的变量的函数。
???? 相同点
这两个解释都在说着同一件事,闭包能访问声明时函数所在的环境中的变量和函数。
那具体是因为什么才会让闭包访问到环境中的变量和函数,这得靠两兄弟:变量对象和作用域链。
变量对象
当执行函数的时候,会创建和初始化一个函数执行环境,在函数执行环境中,全局执行环境的变量对象(Variable Object,缩写为 VO)不能直接访问,此时由激活对象(Activation Object, 缩写为 AO)扮演 VO 的角色。
变量对象专门用来梳理和记住这些变量和函数,是作用域链形成的前置条件。但我们无法直接使用这个变量对象,该对象主要是给 JS 引擎使用的。具体可以查看《JS 总结之变量对象》。
变量对象就相当于一个存放的仓库,获取到里面的东西,还得需要去获取这些的路径,这就是作用域链的事情了。
作用域链
然而,光有变量对象可完成不了闭包的形成,怎样才能让函数访问到,这得靠作用域链,作用域链的作用就是让函数找到变量对象里面的变量和函数。具体可以查看《JS 总结之函数、作用域链》
???? 不同点
虽然都是讲闭包,但 MDN 上面讲的是声明该函数的词法环境,而 JS 高程讲的是访问另一个函数作用域中,从解释上的不同,闭包便有了理论中的闭包(MDN)和实践中的闭包(JS 高程)之分。
???? 理论中的闭包
根据 MDN 的解释写个例子:
var a = 1
function fn() {
console.log(a)
}
fn()
函数 fn 和函数 fn 的词法作用域构成了一个闭包。但是这不是普通的函数吗?
在《JavaScript 权威指南》中也得到证实:
从技术的角度讲,所有 JavaScript 函数都是闭包
????‍????‍ 实践中的闭包
汤姆大叔翻译的文章中讲,实践中的闭包需要满足以下两个条件:

即使创建它的上下文已经销毁,它仍然存在(比如,内部函数从父函数中返回)
在代码中引用了自由变量

什么是上下文?即函数的执行环境。
什么是自由变量?即函数的词法作用域中的变量和函数,而不是函数本身的参数或者局部变量,或者说是所在函数的变量对象中的变量和函数。
这两点和 JS 高程中讲的闭包的解释不谋而合。
现在写个符合的例子:
function fn() {
var a = 1
function fn1() {
console.log(a)
}
return fn1
}

var b = fn()
b()
当执行 b 的时候,创建它的执行环境 fn 早已经摧毁,但函数 b 还能访问到变量 a。
好吧,我有点乱!
要彻底明白这个是咋回事,要结合执行环境、活动变量和作用域链来看,让我们来看看这个例子的执行过程:
???? 执行过程
执行全局代码,创建全局执行环境 globalContext,将全局执行环境推入环境栈

环境栈 = [globalContext]
初始化全局执行环境
globalContext = {
VO: [global],
Scope: [globalContext.VO],
this: globalContext.VO
}
初始化的同时,创建 fn 函数,复制 全局执行环境的作用域链 到 fn 的 [[scope]] 属性

fn.[[scope]] = [
globalContext.VO
]
执行 fn 函数,创建 fn 的执行环境 fnContext,并推入环境栈
环境栈 = [fnContext, globalContext]
初始化 fnContext:

复制 fn 的 [[scope]] 创建 fn 作用域链
创建变量对象,初始化变量对象,加入形参,函数,变量等,由于是函数,变量对象为活动对象
将活动对象推入 fnContext 的 Scope 顶端

fnContext = {
AO: {
arguments: {},
scope: undefined,
fn1: reference to function fn1(){}
},
Scope: [AO, globalContext.VO],
this: undefined
}
初始化同时,创建 fn1 函数,复制 fnContext 的作用域链 到 fn1 的 [[scope]] 属性

fn1.[[scope]] = [
fnContext.AO, globalContext.VO
]
执行完毕,推出 fnContext
环境栈 = [globalContext]
执行函数 b,也就是被返回的 fn1,创建 fn1 的执行环境 fn1Context,并推入环境栈
环境栈 = [
fn1Context,
globalContext
]
初始化 fn1Context:

复制 fn1 的 [[scope]] 创建 fn1 作用域链
创建变量对象,初始化变量对象,加入形参,函数,变量等,由于是函数,变量对象为活动对象
将活动对象推入 fn1Context 的 Scope 顶端

fn1Context = {
AO: {
arguments: {}
},
Scope: [AO, fnContext.AO, globalContext.VO],
this: undefined
}
执行完毕,推出 fn1Context
环境栈 = [globalContext]
???? 柳暗花明
当执行函数 b 的时候,创建它的执行环境 fn 早已摧毁(步骤 6),只留下了它的活动变量 fnContext.AO 于内存中(步骤 5):
fn1Context = {
Scope: [AO, fnContext.AO, globalContext.VO]
}
fnContext.AO 存在 fn1 的作用域链中,所以能访问到 fn1 的词法环境,这便形成了闭包。因此,闭包是变量对象和作用域链共同作用的结果。
???? 参考

《闭包》by MDN

《JavaScript 深入之执行上下文》by 冴羽

《JavaScript 深入之闭包》by 冴羽

《深入理解 JavaScript 系列(16):闭包(Closures)》by 汤姆大叔
《JavaScript 高级程序设计(第 3 版)》4.2 执行环境及作用域、7.2 闭包
《JavaScript 权威指南》8.6 闭包

正文完
 0