JavaScript的执行上下文，作用域链，闭包，原型链等重要概念

一、执行上下文

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的地址引用   
      a:undefined
}

未进入执行阶段之前，变量对象中的属性都不能访问！但是进入执行阶段之后，变量对象转变为了活动对象，里面的属性都能被访问了，然后开始进行执行阶段的操作。如果再面试的时候被问到变量对象和活动对象有什么区别，他们其实都是同一个对象，只是处于执行上下文的不同生命周期。

//执行阶段
VO -->AO   // Active Object
AO = {
      arguments: {...},
      foo: ,
      a: 1
}

再举一个例子：

image.png

//创建阶段
VO={
    arguments: {...},
    foo: ,
    bar: undefined
}
// 这里有一个需要注意的地方，因为var声明的变量当遇到同名的属性时，会跳过而不会覆盖

// 执行阶段
VO -> AOVO = {
    arguments: {...},
    foo: 'Hello',
    bar: 
}