JavaScript执行上下文栈(Execution Context Stack简称ECS)

2017-12-18

本文重点讲解JavaScript的执行上下文栈，顺带稍稍提了下执行上下文。

执行上下文栈来管理执行上下文的顺序。
JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(Execution Context简称EC)。

JavaScript代码是如何执行的

JavaScript语言执行时是自上而下的，JavaScript执行程序的时候，会首先创建一个全局的执行上下文，将其放入栈中，成为栈底。而后每次执行一个函数的时候，都会去创建一个当前函数的执行上下文，然后将其压入栈中，当函数结束或者返回的时候，再从栈中弹出当前函数的执行上下文。

执行上下文的生命周期

仔细琢磨JavaScript代码是如何执行的的描述，相信我们大家都可以看出一个执行上下文的生命周期通常包含三个发展阶段：创建阶段、代码执行阶段、执行完毕阶段。

创建阶段：在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向.
代码执行阶段：创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。
执行完毕阶段：执行完毕之后，就会开始将执行上下文出栈，随后释放掉所占用的内存

执行上下文栈(Execution Context Stack简称ECS)

JavaScript引擎创建了执行上下文栈来管理执行上下文的顺序

栈stack是数据结构上的概念，用来处理数据的存放方式，特点为LIFO，即后进先出（Last in, first out）。

var a = 10;

function functionA() {

	console.log("Start function A");

	function functionB(){
		console.log("In function B");
	}

	functionB();

}

functionA();

console.log("GlobalContext");

在浏览器中，javascript引擎的工作方式是单线程的。也就是说，某一时刻只有唯一的一个事件是被激活处理的，其它的事件被放入队列中，等待被处理。下面的示例图描述了这样的一个堆栈：

当javascript代码文件被浏览器载入后，首先进入全局环境，创建一个全局执行上下文，全局变量对象window，全局作用域Global，确定this指向，this==window。当在全局上下文中调用执行一个函数时，程序流就进入该被调用函数内，此时引擎就会为该函数创建一个新的执行上下文，并且将其压入到执行上下文堆栈的顶部。浏览器总是执行当前在堆栈顶部的上下文，一旦执行完毕，该上下文就会从堆栈顶部被弹出，然后，进入其下的上下文执行代码。这样，堆栈中的上下文就会被依次执行并且弹出堆栈，直到回到全局的上下文。

Reference Doc

Execution context, Scope chain and JavaScript internals
ECMA-262-3 in detail. Chapter 1. Execution Contexts.