下面完整解析执行上下文栈和执行上下文的具体变化过程。
【示例代码】
var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope();
【执行过程】
第1步,执行全局代码,创建全局执行上下文,全局上下文被压入执行上下文栈。
ECStack = [ globalContext ];
第2步,全局上下文初始化。
globalContext = { VO: [global, scope, checkscope], Scope: [globalContext.VO], this: globalContext.VO }
第3步,初始化的同时,checkscope 函数被创建,保存作用域链到函数的内部属性[[scope]]。
checkscope.[[scope]] = [ globalContext.VO ];
第4步,执行 checkscope 函数,创建 checkscope 函数执行上下文,checkscope 函数执行上下文被压入执行上下文栈。
ECStack = [ checkscopeContext, globalContext ];
第5步,checkscope 函数执行上下文初始化:
- 复制函数 [[scope]] 属性创建作用域链,
- 用 arguments 创建活动对象,
- 初始化活动对象,即加入形参、函数声明、变量声明,
- 将活动对象压入 checkscope 作用域链顶端。
- 同时 f 函数被创建,保存作用域链到 f 函数的内部属性[[scope]]。
checkscopeContext = { AO: { arguments: { length: 0 }, scope: undefined, f: reference to function f(){} }, Scope: [AO, globalContext.VO], this: undefined }
第6步,执行 f 函数,创建 f 函数执行上下文,f 函数执行上下文被压入执行上下文栈。
ECStack = [ fContext, checkscopeContext, globalContext ];
第7步,f 函数执行上下文初始化, 以下跟第 4 步相同:
- 复制函数 [[scope]] 属性创建作用域链。
- 用 arguments 创建活动对象。
- 初始化活动对象,即加入形参、函数声明、变量声明。
- 将活动对象压入 f 作用域链顶端。
fContext = { AO: { arguments: { length: 0 } }, Scope: [AO, checkscopeContext.AO, globalContext.VO], this: undefined }
第8步,f 函数执行,沿着作用域链查找scope值,返回 scope值.
第9步,f 函数执行完毕,f 函数上下文从执行上下文栈中弹出。
ECStack = [ checkscopeContext, globalContext ];
第10步,checkscope 函数执行完毕,checkscope 执行上下文从执行上下文栈中弹出。
ECStack = [ globalContext ];