JS基础之执行上下文

执行上下文

顺序执行

写个JavaScript的开发者都会有个直观的印象，那就是顺序执行：

var foo = function(){
	console.log('foo1')
}
foo(); //foo1
var foo = function(){
	console.log('foo2');
}
foo();//foo2

那这段呢？

function foo(){
	console.log('foo1');
}
foo(); // foo2
function foo(){
	console.log('foo2');
}
foo(); //foo2

打印的结果却是两个foo2
这是因为JavaScript引擎并非一行一行的分析和执行程序，而是一段一段的分析执行。当执行一段代码的时候，会进行一个“准备工作”，那这个“一段一段”中的“段”究竟是怎么划分的呢？
到底JavaScript引擎遇到一段怎样的代码时，才会做“准备工作”呢？

console.log(add2(1,2));//输出3
function add2(a,b){
	return a+b;
}
console.log(add1(1,1));//报错：add1 is not a function
var add1 = function(a,b){
	return a+b;
}
//用函数语句创建的函数add2,函数名称和函数体均被提前，在声明他之前就使用它。
//但是使用var表达式定义函数add1，只有变量声明提前了，变量初始化代码仍然在原来的位置，没有办法提前执行。

可执行代码

这就要说到JavaScript的可执行代码（executable code）的类型有哪些了？
其实很简单，就三种，全局代码、函数代码、eval代码
举个例子，当执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，让我们用更专业的说法，就叫做“执行上下文（execution context）”。

执行上下文栈

JavaScript引擎创建了执行上下文栈（Execution Context stack, ECS）来管理执行上下文，为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组：

ECStack = [];

试想当JavaScript开始要解释执行代码的时候，最先遇到的 就是全局代码，所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，我们用globalContext表示它，并且只有当整个应用程序结束的时候，ECStack才会被清空，所以程序结束之前，ECStack最底部永远有个globalContext：

ECStack = [
	globalContext
];

当JavaScript遇到下面的这段代码了:

function fun3(){
	console.log('fun3');
}
function fun2(){
	fun3();
}
function fun1(){
	fun2();
}
fun1();

当执行一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。知道了这样的工作原理，让我们来看看如何处理上面这段代码：

//伪代码
//fun1()
ESCtack.push(<fun1> functionContext);//入栈
//fun1中竟然调用了fun2,还要创建fun2的执行上下文
ESCtack.push(<fun2> functionContext);//入栈
//fun2还调用了fun3！
ESCtack.push(<fun3> functionContext);//入栈
//fun3执行完毕
ESCtack.pop();//出栈
//fun2执行完毕
ESCtack.pop();//出栈
//fun1执行完毕
ESCtack.pop();//出栈
//javascript接着执行下面的代码，但是ESCtack底层永远有个globalContext

回顾上文

//case 1
var scope = "global scope";
function checkscope(){
	var scope = "local scope";
	function f(){
		return scope;
	}
	return f();
}
checkscope();

//case 2
var scope = "global scope";
function checkscope(){
	var scope = "local scope";
	function f(){
		return scope;
	}
	return f;
}
checkscope()();

两段代码执行的结果一样，但是两段代码究竟有哪些不同呢？
答案是：执行上下文栈的变化不一样。
模拟第一段代码：

ECStack.push(<checkscope> functionContext);//入栈
ECStack.push(<f> functionContext);//入栈
ECStack.pop();//出栈
ECStack.pop();//出栈

模拟第二段：

ECStack.push(<checkscope> functionContext);
ECStack.pop();//出栈
ECStack.push(<f> functionContext);//入栈
ECStack.pop()//出栈

这就是上文说到的区别。

好啦！这期就到这里啦，欢迎友友们留言讨论呐~