本篇文章给大家带来的内容是关于JavaScript执行上下文的详细介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在《深入学习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 ]
以上是JavaScript执行上下文的详细介绍（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
