一、执行上下文
JavaScript中的运行环境包括三种情况：
- 全局环境（Global Code）：JavaScript代码运行起来会首先进去该环境
- 函数环境（Function Code）：当函数被调用执行时，会进入当前函数中执行代码
- Eval Code：使用eval()执行代码
为了表示不同的运行环境，JavaScript中有一个执行上下文（Execution context，EC）的概念。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。每次当控制器转到可执行代码的时候，就会进入一个执行上下文。
在一个JavaScript程序中，必定会产生多个执行上下文，JavaScript引擎会以堆栈的方式来处理它们，这个堆栈称其为函数调用栈（call stack）。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。
当代码在执行过程中，遇到以上三种情况，都会生成一个执行上下文，放入栈中，而处于栈顶的上下文执行完毕之后，就会自动出栈。例：
image.png
用ECStack来处理执行上下文组的堆栈。
image.png
- 第一步：全局上下文入栈。
全局上下文入栈之后，其中的可执行代码开始执行，直到遇到了changeColor()，这一句激活函数changeColor创建它自己的执行上下文- 第二步：changeColor的执行上下文入栈。
changeColor的执行上下文入栈之后，控制器开始执行其中的可执行代码，遇到swapColors()之后又激活了一个执行上下文。- 第三步：swapColors的执行上下文入栈。
在swapColors的可执行代码中，再没有遇到其他能生成执行上下文的情况，一次这段代码顺利执行完毕，swapColors的上下文从栈中弹出
-第四步：swapColors的执行上下文出栈。
swapColors的执行上下文弹出之后，继续执行changeColor的可执行代码，也没有再遇到其他执行上下文，顺利执行完毕之后弹出。这样，ECStack中就只身下全局上下文了- 第五步：changeColor的执行上下文出栈。
全局上下文在浏览器窗口关闭后出栈- 注意：函数中，遇到return能直接终止可执行代码的执行，因此会直接将当前上下文弹出栈。
了解以上过程之后，对执行上下文的总结的一些结论：
- 单线程
- 同步执行，只有栈顶的上下文处于执行中，其他上下文需要等待
- 全局上下文只有唯一的一个，它在浏览器关闭时出栈
- 函数的执行上下文的个数没有限制
- 每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此。
为了巩固一下执行上下文的理解，再来绘制一个例子的演变过程，这是一个简单的闭包例子。
image.png
因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。
image.png
当调用一个函数时（激活），一个新的执行上下文就会被创建。而一个执行上下文的生命周期可以分为两个阶段。
- 创建阶段，在这个阶段中，执行上下文分别创建变量对象，建立作用域链，以及确定this的指向。
- 代码执行阶段，创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。
image.png
从这里可以看出了解执行上下文极为重要，其中涉及到变量对象，作用域链，this等概念。
1、变量对象
变量对象的创建，依次经历了以下几个过程：
（1）建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。
（2）检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。
（3）检查当前上下文中的变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果改变量名的属性已经存在，为了防止同名函数被修改为undefined，则会直接跳过，原属性值不会被修改。
image.png
可以用变量对象的创建过程解释变量提升；什么是变量提升呢？看下面的例子：
image.png
除了有变量提升还有函数提升
函数提升是把整个函数都提到前面去，函数有两种写法，一种是函数声明方式，另外一种是函数表达式，只有函数声明形式才能被提升。
函数声明方式提升【成功】.png
函数表达式方式提升【失败】.png
在上面变量对象的创建的规则中我们看出，function声明会比var声明优先级更高一点。为了更好的理解变量对象，在结合一些简单的例子进行探讨：
image.png
从test()的执行上下文开始理解。全局作用域中运行test()时，test()的执行上下文开始创建，
创建过程(创建变量对象，建立作用域链，以及确定this的指向)：
testEC={
//变量对象
VO:{}, //VO 为 Variable Object的缩写，即变量对象
scopeChain:{},
this:{}
}
VO={
arguments:{...}, //注：在浏览器的展示中，函数的参数可能并不是放在arguments对象中，这里为了方便理解，做了这样的处理
foo:<foo reference> // 表示foo的地址引用
a:undefined
}
未进入执行阶段之前，变量对象中的属性都不能访问！但是进入执行阶段之后，变量对象转变为了活动对象，里面的属性都能被访问了，然后开始进行执行阶段的操作。如果再面试的时候被问到变量对象和活动对象有什么区别，他们其实都是同一个对象，只是处于执行上下文的不同生命周期。
//执行阶段
VO -->AO // Active Object
AO = {
arguments: {...},
foo: <foo reference>,
a: 1
}
再举一个例子：
image.png
//创建阶段
VO={
arguments: {...},
foo: <foo reference>,
bar: undefined
}
// 这里有一个需要注意的地方，因为var声明的变量当遇到同名的属性时，会跳过而不会覆盖
// 执行阶段
VO -> AOVO = {
arguments: {...},
foo: 'Hello',
bar: <bar reference>
}
网友评论