作用域链(scope chain)
当js碰到可执行代码时,首先必然会先创建执行上下文,其中包括了
- 变量对象
- 作用域链
- this对象
定义
The scope chain property of each execution context is simply a collection of the current context's [VO] + all parent’s lexical [VO]s.
Scope = VO + All Parent VOs
Eg: scopeChain = [ [VO] + [VO1] + [VO2] + [VO n+1] ];
简而言之, 作用域链是当前执行上下文VO以及其父级词法VO的集合。
函数的生命周期
创建阶段
就是当在预处理的时候碰到了一个函数,当前此函数并没有被执行,此时它的作用域已经被确定了。因为js使用的是词法作用域。
执行阶段
当函数即将进入执行阶段之前,它会先生成函数执行上下文,即上下文的创建阶段。上下文对象中的作用域链属性也就在此刻被创建了。当执行上下文创建完毕,便进入函数的执行阶段。
内容
作用域链既然是一个集合,它存储在哪里?集合里面的内容是如何被放进去的呢?
存储在哪里?
函数有一个内部属性叫做[[scope]
,当在函数的创建阶段时,就会保存所有父级的变量对象到[[scope]]
中。它现在已经有了除了自己本身执行上下文中的VO以外的所有VO了!
自己的VO
当创建函数执行上下文时,会先创建VO,然后将这个VO填充到作用域链的前端。
举个例子
var bar = 1
function foo() {
var baz = 1
console.log(baz)
}
foo()
详细步骤如下:
1.js开始执行全局执行上下文(globalContext)入栈
stack=[[globalContext]
]
foo函数被创建,确定作用域。保存作用域链到内置属性
[[scope]]
中
foo.[[scope]] = [globalContext.VO
]-
foo函数将要被执行,首先要生成foo函数的执行上下文(fooContext)并将其压入执行栈
stack=[[fooContext]
,[globalContext]
],此时fooContext中属性还没有完成赋值。
3.1 先复制foo.[[scope]]给fooContext
此时fooContext = {scopeChain: [foo.[[scope]]]}
3.2 确定VO
此时fooContext = { VO: { arguments: {length: 0}, baz: undefined }, scopeChain: [foo.[[scope]]] }
3.3 将VO对象放置于作用域链的前端
此时fooContext = { VO: { arguments: {length: 0}, baz: undefined }, scopeChain: [VO, foo.[[scope]]] }
函数开始执行
将VO依此赋值,并执行函数,foo执行完毕,fooContext从执行栈中弹出
此时stack=[globalContext]