概念
EC:函数执行环境(或执行上下文)，Execution Context
ECS:执行环境栈，Execution Context Stack
VO:变量对象，Variable Object
AO:活动对象，Active Object
scope chain:作用域链
EC执行上下文
每次当控制器转到ECMAScript可执行代码的时候，就会进入到一个执行上下文。
可执行代码的类型
1、全局代码(
Global code
)
这种类型的代码是在“程序”级处理的：例如处理外部加载的js文件或本地的<script></script>标签内的代码。全局代码不包括任何function体内的代码，这是个默认的代码运行环境，一旦代码被载入，引擎最先进入这个环境。
2、函数代码(Function code)
任何一个函数体内的代码，但是需要
注意
的是，具体的函数体内的代码是不包括内部函数的代码。
3、Eval代码(Eval code)
eval内部的代码
ESC(执行环境栈)
例：
function foo(i) { if (i < 0) return; console.log('begin:' + i); foo(i - 1); console.log('end:' + i);}foo(2);// 输出:// begin:2// begin:1// begin:0// end:0// end:1// end:2
浏览器中的JS解释器被实现为单线程，这也就意味着同一时间只能发生一件事情，其他的行为或事件将会被放在叫执行栈里面排队。下面是单线程栈的抽象视图：
当浏览器首次载入你的脚本，它将默认进入全局执行上下文。如果，你在你的全局代码中调用一个函数，你程序的时序将进入被调用的函数，并创建一个新的执行上下文，并将新创建的上下文压入执行栈的顶部。
如果你调用当前函数内部的其他函数，相同的事情会在此上演。代码的执行流程进入内部函数，创建一个新的执行上下文并把它压入执行栈的顶部。浏览器总会执行位于栈顶的执行上下文，一旦当前上下文函数执行结束，它将被从栈顶弹出，并将上下文控制权交给当前的栈。这样，堆栈中的上下文就会被依次执行并且弹出堆栈，直到回到全局的上下文。
看到这里，想必大家都已经深谙上述例子输出结果的原因了，这里我大概绘了一个流程图来帮助理解。
VO（变量对象）/AO（活动对象）
这里为什么要用一个
/
呢？按照字面理解，AO其实就是被激活的VO，两个其实是一个东西。
变量对象
（Variable object）
是说JS的执行上下文中
都有个对象
用来存放执行上下文中可被访问但是不能被
delete
的
函数标示符
、
形参
、
变量声明
等。它们会被挂在这个对象上，
对象的属性
对应
它们的名字
，
对象属性的值
对应
它们的值
,
但这个
对象
是
规范上
或者说是
引擎实现上
的
不可在JS环境中访问
到活动对象
激活对象
（Activation object）
有了变量对象存每个上下文中的东西，但是它什么时候能被访问到呢？就是
每进入一个执行上下文
时，这个执行上下文儿中的变量对象就被激活，也就是该上下文中的函数标示符、形参、变量声明等就可以被访问到了
EC建立的细节
1、创建阶段【当函数被调用，但未执行任何其内部代码之前】
- 创建作用域链（Scope Chain）
- 创建变量，函数和参数。
- 求”this“的值
2、执行阶段
初始化变量的值和函数的引用，解释/执行代码。
我们可以将每个执行上下文抽象为一个对象，这个对象具有三个属性
ECObj
: {
scopeChain
: {
/* 变量对象（variableObject）+ 所有父级执行上下文的变量对象*/
},
variableObject
: {
/*函数 arguments/参数，内部变量和函数声明 */
},
this
: {} }
解释器执行代码的伪逻辑
1
、查找调用函数的代码。
2
、执行代码之前，先进入创建上下文阶段： - 初始化作用域链 - 创建变量对象： - 创建
arguments
对象，检查上下文，初始化参数名称和值并创建引用的复制。 - 扫描上下文的函数声明（而非函数表达式）： - 为发现的每一个函数，在变量对象上创建一个属性——确切的说是函数的名字——其有一个指向函数在内存中的引用。 - 如果函数的名字已经存在，引用指针将被重写。 - 扫描上下文的变量声明： - 为发现的每个变量声明，在变量对象上创建一个属性——就是变量的名字，并且将变量的值初始化为
undefined
- 如果变量的名字已经在变量对象里存在，将不会进行任何操作并继续扫描。 - 求出上下文内部
this
的值。
3
、激活/代码执行阶段：- 在当前上下文上运行/解释函数代码，并随着代码一行行执行指派变量的值。
VO --- 对应上述第二个阶段
function
foo
(i)
{
var
a =
'hello'
var
b =
function
()
{}
function
c
()
{}}foo(
22
)
当我们调用
foo(22)
时，整个创建阶段是下面这样的
ECObj = { scopChain： {...},
variableObject:
{
arguments:
{
0
:
22
,
length:
1
},
i:
22
,
c:
pointer to function c()
a:
undefined,
b:
undefined },
this:
{ ... }}
正如我们看到的，在上下文创建阶段，VO的初始化过程如下（
该过程是有先后顺序的：
函数的形参==>>函数声明==>>变量声明
）：
- 函数的形参（当进入函数执行上下文时） —— 变量对象的一个属性，其属性名就是形参的名字，其值就是实参的值；对于没有传递的参数，其值为undefined
- 函数声明（FunctionDeclaration, FD） —— 变量对象的一个属性，其属性名和值都是函数对象创建出来的；如果变量对象已经包含了相同名字的属性，则替换它的值
- 变量声明（var，VariableDeclaration） —— 变量对象的一个属性，其属性名即为变量名，其值为undefined;如果变量名和已经声明的函数名或者函数的参数名相同，则不会影响已经存在的属性。
对于函数的形参没有什么可说的，主要看一下函数的声明以及变量的声明两个部分。
1、如何理解函数声明过程中
如果变量对象已经包含了相同名字的属性，则替换它的值
这句话？
例：
function
foo1
(
a
)
{
console
.log(a)
function
a
()
{} }foo1(
20
)
//'function a(){}'
根据上面的介绍，我们知道VO创建过程中，函数形参的优先级是高于函数的声明的，
结果是
函数体内部声明的
function a(){}
覆盖了函数形参
a
的声明，因此最后输出
a
是一个
function
2、如何理解变量声明过程中
如果变量名和已经声明的函数名或者函数的参数名相同，则不会影响已经存在的属性
这句话？
例
//情景一：与参数名相同
function
foo2
(
a
)
{
console
.log(a)
var
a =
10
}foo2(
20
)
//'20'
//情景二：与函数名相同
function
foo2
()
{
console
.log(a)
var
a =
10
function
a
()
{}}foo2()
//'function a(){}'
下面是几个比较有趣的例子，当做加餐小菜，大家细细品味。这里给出一句话当做参考：
函数声明比变量优先级要高，并且定义过程不会被变量覆盖，除非是赋值
function
foo3
(
a
)
{
var
a =
10
function
a
()
{}
console
.log(a)}foo3(
20
)
//'10'
function
foo3
(
a
)
{
var
a
function
a
()
{}
console
.log(a)}foo3(
20
)
//'function a(){}'，
^上面的代码自我感觉有些问题，特别是console.log放在最前面或是最后面都不能如定义所说的结果一样
AO --- 对应第三个阶段
正如我们看到的，创建的过程仅负责处理定义属性的名字，而并不为他们指派具体的值，当然还有对形参/实参的处理。一旦创建阶段完成，执行流进入函数并且激活/代码执行阶段，看下函数执行完成后的样子：
ECObj = { scopeChain: { ... }, variableObject: {
arguments
: {
0
:
22
, length:
1
}, i:
22
, c: pointer to
function
c
()
a
: '
hello
',
b
:
pointer
to
function
privateB
() },
this
:
{ ... }}
提升（Hoisting）
对于下面的代码，相信很多人都能一眼看出输出结果，但是却很少有人能给出为什么会产生这种输出结果的解释。
(
function
()
{
console
.log(
typeof
foo);
// 函数指针
console
.log(
typeof
bar);
// undefined
var
foo =
'hello'
, bar =
function
()
{
return
'world'
; };
function
foo
()
{
return
'hello'
; }}());
1、为什么我们能在foo声明之前访问它？
回想在
VO
的创建阶段，我们知道函数在该阶段就已经被创建在变量对象中。所以在函数开始执行之前，foo已经被定义了。
2、Foo被声明了两次，为什么foo显示为函数而不是undefined或字符串？
我们知道，在创建阶段，函数声明是优先于变量被创建的。而且在变量的创建过程中，如果发现
VO
中已经存在相同名称的属性，则不会影响已经存在的属性。
因此，对
foo()
函数的引用首先被创建在活动对象里，并且当我们解释到var foo时，我们看见
foo
属性名已经存在，所以代码什么都不做并继续执行。
3、为什么bar的值是undefined？
bar
采用的是函数表达式的方式来定义的，所以
bar
实际上是一个变量，但变量的值是函数，并且我们知道变量在创建阶段被创建但他们被初始化为
undefined
，这也是为什么函数表达式不会被提升的原因。
总结：
1、
EC
分为两个阶段，创建执行上下文和执行代码。
2、每个
EC
可以抽象为一个对象，这个对象具有三个属性，分别为：作用域链
Scope
，
VO|AO
（
AO
，
VO
只能有一个）以及
this
。
3、函数
EC
中的
AO
在进入函数
EC
时，确定了Arguments对象的属性；在执行函数
EC
时，其它变量属性具体化。
4、
EC
创建的过程是由先后顺序的：参数声明
>
函数声明
>
变量声明
^
例1：
function foo3(a){
var a=10;
function a(){};
console.log(a);
}
foo3(20); //'10'
例2:
function foo3(a){
console.log(a)
var a = 10
function a(){}
}
foo3(20) ; //'function a(){}' ,根据上面的定义，总感觉这两段代码怪怪的，有问题
例3:
(function() {
console.log(typeof foo); //function
console.log(typeof bar); //undefined
var foo = 'hello',
bar = function() {
return 'world';
};
function foo() {
return 'hello';
}
console.log(typeof foo); //string
console.log(typeof bar); //function
}());
例4:
function foo3(a){
var a=10;
console.log(a);
}
foo3(20); //10，奇葩，不是参数优先级比变量声明优先级高吗？还有这段：
function foo1(a){
console.log(a);
function a(){};
}
foo1(20)//'function a(){}' //不是参数优先级比函数声明优先级高吗？看来这两个都是一个特例