顺序执行?
如果要问js代码执行顺序的话,写过js的开发者直观印象,就是顺序执行,比如:
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
javascript引擎并非一行一行分析和执行程序,而是一段一段地分析执行。当执行一段代码的时候,会进行一个“准备工作”,比如第一个例子中的变量提升,和第二个例子中的函数提升。
但是本文想让大家思考的是:这个“一段一段”中的“段”是怎么划分的呢?
到底js引擎遇到一段怎样的代码时才会做“准备工作”呢?
可执行代码
javascript的可执行代码(executable code)类型就三种,全局代码、函数代码、eval代码
举个例子,当执行到一个函数的时候,就会进行准备工作,这里的“准备工作”,让我们用更专业一点的说法,就叫做“执行上下文(execution contexts)”
执行上下文栈
问题来了,这么多函数,如果管理创建的那么多执行上下文呢?
javascript引擎创建了执行上下文栈(execution context stack,ECS)来管理执行上下文,为了模拟ECS的行为,让我们定义执行上下文栈是一个数组:
ECStack = [];
当javascript开始要解释执行代码的时候,最先遇到的就是全局代码,所以初始化的时候,首先就会向执行上下文压入一个全局执行上下文,我用globalContext表示,并且只有当整个应用程序结束时ECStack才会被清空,所以ECStack最底部永远有个globalContext:
ESCtack = [globalContext];
现在javascript遇到下面这段代码了
function fun3() { console.log('fun3') } function fun2() { fun3(); } function fun1() { fun2(); } fun1();
当执行一个函数的时候,就会创建一个上下文,并且压入上下文栈,当函数执行完毕时,就会将函数的执行上下文从栈中弹出。知道了这样的工作原理,让我们看看如何处理上面这段代码:
// 伪代码 // fun1() ECStack.push(<fun1> functionContext); // fun1中竟然调用了fun2,还要创建fun2的执行上下文 ECStack.push(<fun2> functionContext); // 擦,fun2还调用了fun3! ECStack.push(<fun3> functionContext); // fun3执行完毕 ECStack.pop(); // fun2执行完毕 ECStack.pop(); // fun1执行完毕 ECStack.pop(); // javascript接着执行下面的代码,但是ECStack底层永远有个globalContext
解答思考题
了解了执行上下文栈是如何处理执行上下文的,所以让我们看看《深入--词法作用域和动态作用域》最后的问题:
var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope();
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();
当然了,这样概括的回答执行上下文栈的变化不同,是不是有一种意犹未尽的感觉,为了更详细讲解两个函数执行上的区别,我们需要探究一下执行上下文到底包含了那些内容,请看《深入--变量对象》