JavaScript基础专题之执行上下文和执行栈（二）

执行顺序

通常执行顺序很显然按照建立顺序执行，对大对数开发者来讲并不陌生。

像是这样：

foo();  // 报错
var foo = function () {

    console.log('foo1');

}

foo();  // foo1

var foo = function () {

    console.log('foo2');

}

foo(); // foo2
复制代码

然而有的时候会是这样:

foo();  // foo2

function foo() {

    console.log('foo1');

}

foo();  // foo2

function foo() {

    console.log('foo2');

}

foo(); // foo2
复制代码

咱们能够看到，做为函数调用的时候，会出现三个foo2。其实 JavaScript 引擎并不是一行一行地分析和执行程序，在执行以前会对一些对结构进行分析执行。好比第一个例子中的变量提高，和第二个例子中的函数提高。 那么JS又是如何进行结构化的解析的呢？执行过程当中又作了什么动做呢？

栈

栈又是什么？

这张图分别展现了栈、堆和队列，其中栈就是咱们所说的执行上下文栈；堆是用于存储复杂类型好比：对象，数组等等。队列就是异步队列，用于事件循环(event loop)的执行。 JS代码在引擎中是以代码片断的方式来分析执行的，而并不是一行一行来分析执行。

简单的例子

//入栈过程
Stack.push("chris")

Stack.push("james")

Stack.push("kobe")

//出栈过程

Stack.pop() //["chirs","james"]

Strack.pop() //["chirs"]

Stack.pop() //[]
复制代码

能够看出，栈是执行过程是一个先入后出的过程。

可执行代码

而这些代码片断的可执行代码无非为三种：全局代码（Global code）、函数代码（Function Code）、eval代码（Eval code）。 这些可执行代码在执行的时候又会建立一个一个的执行上下文（Execution context）。例如，当执行到一个 函数的时候，JS引擎会作一些“准备工做”，而这个“准备工做”，咱们称其为执行上下文。 那么随着咱们的执行上下文数量的增长，JS引擎又如何去管理这些执行上下文呢？这时便有了执行上下文栈。

执行上下文栈

问题来了，咱们写的函数多了去了，如何管理建立的那么多执行上下文呢？

因此 JavaScript 引擎建立了执行上下文栈（Execution context stack，ECS）来管理执行上下文

为了模拟执行上下文栈的行为，让咱们定义执行上下文栈是一个数组：

Stack= [];
复制代码

试想当 JavaScript 开始要解释执行代码的时候，最早遇到的就是全局代码，因此初始化的时候首先就会向执

行上下文栈压入一个全局执行上下文，咱们用 globalContext 表示它，而且只有当整个应用程序结束的时候，

Stack才会被清空，因此程序结束以前， Stack最底部永远有个 globalContext：

Stack = [
    globalContext// 一开始只有全局上下文
];
复制代码

一个简单的例子：

function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();
复制代码

每当一个函数执行，就会建立一个执行上下文，而且压入执行上下文栈，当函数执行完毕的时候，就会将函

数的执行上下文从栈中弹出。

// fun1()
Stack .push(<fun1> functionContext); 
//[globalContext,<fun1> functionContext]

// fun1中有fun2，还要建立fun2的执行上下文
Stack .push(<fun2> functionCofuntext);
//[globalContext,<fun1> functionContext,<fun2> functionCofuntext],

// fun2还调用了fun3
Stack .push(<fun3> functionContext);
//[globalContext,<fun1> functionContext,<fun2> functionCofuntext,<fun3> functionContext]      

// fun3执行完毕 
Stack .pop();
//[globalContext,<fun1> functionContext,<fun2> functionCofuntext]

// fun2执行完毕
Stack .pop();
//[globalContext,<fun1> functionContext]

// fun1执行完毕
Stack .pop();
//[globalContext]

// javascript接着执行下面的代码，可是Stack 底层永远有个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()();
复制代码

两段代码执行的结果同样，可是两段代码究竟有哪些不一样呢？

答案就是执行上下文栈的变化不同。

先模拟第一段代码：

Stack.push(<checkscope> functionContext);
Stack.push(<f> functionContext);
Stack.pop();
Stack.pop();
复制代码

再模拟第二段代码：

Stack.push(<checkscope> functionContext);
Stack.pop();
Stack.push(<f> functionContext);
Stack.pop();
复制代码

咱们能够发现二三部分出栈和入栈是不一样的。

总结

1. JS代码在引擎中是以一段一段的方式来分析执行的，而并不是一行一行来分析执行
2. 可执行代码分为三种：全局代码（Global code）、函数代码（Function Code）、eval代码（Eval code），其中全局代码、函数代码比较常见，关于eval代码可参考JavaScript 为何不推荐使用 eval？
3. 每遇到函数执行的时候，就会建立一个执行上下文，执行上下文会进入执行上下文栈中
4. 程序开始最早入栈和程序结束最后出栈的都是全局执行上下文

JavaScript基础专题系列

JavaScript基础专题系列目录地址：

JavaScript基础专题之原型与原型链（一）

新手写做，若是有错误或者不严谨的地方，请大伙给予指正。若是这篇文章对你有所帮助或者有所启发，还请给一个赞，鼓励一下做者，在此谢过。