深入理解执行上下文

深入理解执行上下文（Execution Contexts）

定义
每次当控制器转到ECMAScript可执行代码的时候，即会进入到一个执行上下文。执行上下文(简称-EC)是ECMA-262标准里的一个抽象概念，用于同可执行代码(executable code)概念进行区分。
标准规范没有从技术实现的角度定义EC的准确类型和结构，这应该是具体实现ECMAScript引擎时要考虑的问题。
活动的执行上下文组在逻辑上组成一个堆栈。堆栈底部永远都是全局上下文(global context)，而顶部就是当前(活动的)执行上下文。堆栈在EC类型进入和退出上下文的时候被修改（推入或弹出）。
可执行代码类型
可执行代码的类型这个概念与执行上下文的抽象概念是有关系的。在某些时刻，可执行代码与执行上下文完全有可能是等价的。
例如，我们可以定义执行上下文堆栈是一个数组：

ECStack = [];

每次进入function (即使function被递归调用或作为构造函数) 的时候或者内置的eval函数工作的时候，这个堆栈都会被压入。
全局代码

这种类型的代码是在"程序"级处理的：例如加载外部的js文件或者本地<script></script>标签内的代码。全局代码不包括任何function体内的代码。
在初始化（程序启动）阶段，ECStack是这样的：

ECStack = [
  globalContext
];

函数代码
当进入funtion函数代码(所有类型的funtions)的时候，ECStack被压入新元素。需要注意的是，具体的函数代码不包括内部函数(inner functions)代码。如下所示，我们使函数自己调自己的方式递归一次：

(function  foo(bar) {
  if (bar) {
    return;
  }
  foo(true);
})();

那么，ECStack以如下方式被改变：
// 第一次foo的激活调用

ECStack = [
  <foo> functionContext
  globalContext
];

// foo的递归激活调用

ECStack = [
  <foo> functionContext – recursively
  <foo> functionContext
  globalContext
];

每次return的时候，都会退出当前执行上下文的，相应地ECStack就会弹出，栈指针会自动移动位置，这是一个典型的堆栈实现方式。一个抛出的异常如果没被截获的话也有可能从一个或多个执行上下文退出。相关代码执行完以后，ECStack只会包含全局上下文(global context)，一直到整个应用程序结束。

上面还懵的话可以看下面：
JavaScript 中有 Scope( 作用域 ) ， Scope chain( 作用域链 ) ， Execute context( 执行上下文 ) ， Active Object ( 活动对象 ),Dynamic Scope( 动态作用域 ) ， Closure( 闭包 ) 这些概念，要理解这些概念，我们从静态和动态两个方面去分析一下。
执行上文可以理解为一个对象。

• 它包含三个部分：
  变量对象(vo)
  作用域链(词法作用域)
  this指向

• 类型
  全局执行上下文
  函数执行上下文
  eval执行上下文

首先我们写一个简单的 function 来做一个例子

   function add(number1, number2){
           var sum = number1 + number2;
           return sum;
   }

静态方面：函数创建的时候js引擎会创建函数的scopechain，这个作用域指向globalContext(全局执行上下文)

从上图可以看出，当 add 函数创建的时候，作用域链就已经创建了，因此可以得出一个结论，函数的作用域链是创建函数的时候就已经创建了，而不是动态运行期。下面就来看看动态运行期的时候会发生什么事情。

动态方面：

当执行 add 函数的时候， JavaScript 会创建一个 Execute context （执行上下文），执行上下文中就包含了add 函数运行期所需要的所有信息。 Execute context 也有自己的 Scope chain, 当函数运行的时候， JavaScript引擎会首先从用 add 函数的作用域链来初始化执行上下文的作用域链，然后 JavaScript 引擎又会创建一个 Active Object, 这个对象里面包含了函数运行期的所有局部变量，参数以及 this 等变量。

如果形象的描述 add 函数动态运行期会发生什么，可以用如下图来描述：

从上图可以看出，执行上下文是一个动态的概念，它是当函数运行的时候创建的，同时 Active Object 对象也是一个动态的概念，它是被执行上下文的作用域链引用的。因此可以得出一个结论：执行上下文和活动对象都是动态概念，并且执行上下文的作用域链是由函数作用域链初始化的。

上面说了函数作用域和执行上下文作用域，下面接着说一下动态作用域的问题，当在 JavaScript 通过 with 语句， try-catch 的 catch 子句，以及 eval 方法的时候， JavaScript 引擎就会动态的改变执行上下文的作用域。下面还是通过一个例子来看看：

function initUI(){

    with (document){ //avoid!
    
    var bd = body,
    
links = getElementsByTagName("a"),

i= 0,

len = links.length;

while(i < len){

 update(links[i++]);

}

getElementById("go-btn").onclick = function(){

start();

};

bd.className = "active";

}

当执行上面的 initUI 函数的时候， JavaScript 会动态的创建一个 with 语句对应的作用域放到执行上下文作用域链的最前端，通过下图可以形象的描述上述过程，下图红色标注的区域就显示了 with 语句产生的作用域。

最后，我们来看看 JavaScript 最神秘的 Closure （闭包），闭包在 JavaScript 其实就是一个函数，闭包是在函数运行期被创建的，下面还是以一个实例来看看：

function assignEvents(){

var id = "xdi9592";

document.getElementById("save-btn").onclick = function(event){

saveDocument(id);

};

}

当上面的 assignEvents 函数被执行的时候，会创建一个闭包，而这个闭包会引用 assignEvents 作用域中的 id 变量，如果按照传统的编程语言的方式， id 是存储在堆栈上的一个变量，当函数执行完了以后 id 就消失，那么怎么可能再次引用呢？显然这里 JavaScript 采用了另外的方式。下面就来看看 JavaScript 是如何来实现闭包的。当执行 assignEvents 函数的时候， JavaScript 引擎会创建assignEvents函数执行上下文的作用域链，这个作用域链包含了 assignEvents 执行时的活动对象，而同时 JavaScript 引擎也会创建一个闭包，而闭包的作用域链也会引用assignEvent 执行时候的活动对象，这样当 assignEvents 执行完的时候，虽然它本身执行上下文的作用域链不再引用活动对象了，但是闭包还是引用着 assignEvents 运行期对应的活动对象，这就解释了 JavaScipt 内部的闭包机制。可以用下图形象的表述上面 assignEvents 函数运行期的情形：

从上面可以看出，当 assignEvents 函数执行完毕以后， document.getElementById(“save-btn”).onclick 引用了闭包，这样当用户点击 save-btn 的时候，就会触发闭包的执行，那么下面就来看看闭包执行时的情形。前面也说了 JavaScript 中闭包其实就是函数，因此闭包执行和函数执行时的情形是一致的，通过下图来形象的描述上述onclick 事件所关联的闭包。

从上图可以看出 JavaScript 引擎首先创建了闭包的执行上下文，然后用闭包作用域链来初始化闭包的执行上下文作用域链，最后再将闭包执行时对应的活动对象放入到作用域的最前端，这也进一步验证了闭包就是函数的论断。