深入学习js之——执行上下文

在《深入学习js之——执行上下文栈》中说过，当JavaScript代码执行一段可执行代码（executable code）时,会创建对应的执行上下文（execution context）对于每一个执行上下文，都有三个重要的属性：变量对象（Variable object VO）作用域链（Scope chain）this本文我们结合着这三个部分的内容，讲讲执行上下文的具体处理过程。思考题在《深入学习js之——词法作用域和动态作用域》中，提出这样一道思考题：// 思考题一：var scope = “global scope”;function checkscope(){ var scope = “local scope”; function f(){ return scope; } return f();}checkscope();// 思考题二：var scope = “global scope”;function checkscope(){ var scope = “local scope”; function f(){ return scope; } return f;}checkscope()();两段代码都会打印local scope,但是还是有些许差异的，本文就详细的解析执行上下文栈和执行上下文的具体变化过程。具体分析我们分析第一段代码：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: [globalContext.VO], this: globalContext.VO}2、初始化的同时，checkscope 函数被创建，保存作用域链到函数内部的属性[[scope]]checkscope.[[scope]] = [ globalContext.VO];3、执行checkScope 函数，创建checkScope 函数执行上下文，checkScope 函数执行上下文被压入执行上下文栈：ECStack = [ checkscopeContext, globalContext];4、checkscope 函数执行上下文初始化：1.复制函数 [[scope]] 属性创建作用域链，2.用 arguments 创建活动对象，3.初始化活动对象，即加入形参、函数声明、变量声明，4.将活动对象压入 checkscope 作用域链顶端,同时 f 函数被创建，保存作用域链到 f 函数的内部属性[[scope]]checkscopeContext = { AO: { arguments: { length: 0 }, scope: undefined, f: reference to function f(){} }, Scope: [AO, globalContext.VO], this: undefined}5、执行f函数，创建 f 函数执行上下文，f 函数执行上下文被压入执行上下文栈 ECStack = [ fContext, checkscopeContext, globalContext ]6、f 函数执行上下文初始化, 以下跟第 4 步相同：1.复制函数 [[scope]] 属性创建作用域链2.用 arguments 创建活动对象3.初始化活动对象，即加入形参、函数声明、变量声明4.将活动对象压入 f 作用域链顶端 fContext = { AO: { arguments: { length: 0 } }, Scope: [AO, checkscopeContext.AO, globalContext.VO], this: undefined }7、f 函数执行，沿着作用域链查找 scope 值，返回 scope 值8、f 函数执行完毕，f 函数上下文从执行上下文栈中弹出ECStack = [ checkscopeContext, globalContext]9、checkscope 函数执行完毕，checkscope 执行上下文从执行上下文栈中弹出ECStack = [ globalContext]