重学JavaScript（3）--执行上下文-优快云博客

定义：

执行上下文是JavaScript代码被解析和执行时所在的抽象概念，
运行JavaScript代码时，每次当控制器转到可执行代码的时候，就会进入一
个执行上下文。
执行上下文可以理解为当前代码的执行环境
复制代码

JavaScript中的执行环境:

全局环境
函数环境
eval函数环境

那么也对应着三种执行上下文

执行上下文的类型：

全局执行上下文:

  - 默认或者说是基础的上下文。任何不在函数内部的代码都在全局上下文中。 
  - 一个程序（页面）中只有一个，浏览器的全局对象就是window对象。
  - 最开始this指向这个全局对象
复制代码

函数执行上下文：

  - 当函数被调用的时候被创建，每次调用函数都会创建一个新的执行上下文。
复制代码

eval执行上下文:

  - 指运行在eval函数中的代码（使用少，不建议使用）‘
复制代码

执行栈

    具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文
复制代码

JavaScript运行时会先进入全局环境，对应的会生成全局上下文。当程序代码运行到函数时，那么就会进入函数执行代码，对应的生成函数的执行上下文。

因此在一个JavaScript程序当中，必定会产生多个执行上下文。而JavaScript引擎会以执行栈（调用栈）的方式来处理他们。

一个正常JavaScript程序运行的执行上下文

首次运行JavaScript代码的时候，将会创建一个全局的执行上下文并压入当前的执行栈中。每当发生函数调用的时候，将会为调用的函数创建一个新的函数执行上下文，并压入当前执行栈的栈顶。当函数执行完成之后，其对应的函数执行上下文将会从执行栈当中弹出。控制流程将移到被弹出的执行上下文的下一个执行上下文。

用一个例子来理解

var color='blue';
function changeColor(){
    var anotherColor='red';
    function swapColor(){
        var tempColor=anotherColor;
        anotherOther=color;
        color=tempColor;
     }
     swapColor();
}
changeColor();
复制代码

首先当JavaScript开始执行，最先回创建一个全局的执行上下文，并压入执行栈中

之后运行到changeColor（）（函数声明时，不会创建执行上下文，只有当函数被调用的时候才会创建执行上下文），函数changeColor函数的执行上下文创建，将changeColor函数的执行上下文压入调用栈中；

接下来，应为changeColor的上下文入栈，控制器将会执行其中的代码。当遇到swapColor()的时候，swapColor函数的执行上下文也将创建，随后，压入执行栈的栈顶。

当控制器将swapChange中的代码进行执行，再没有遇到其他可以生成其他执行上下文的情况下，swapChange执行完毕。swapChange的上下文将会从执行栈中弹出。

随后，控制器据需执行changChange中的代码，和swapChange’一样，在执行中没有再遇到其他可以生成其他执行上下文的情况下，changeColor执行完毕，changeColor的上下文将会从执行栈中弹出。

执行完成之后，执行栈当中就只剩下全局上下文。

当关闭当前页面的时候，全局上下文也将被弹出执行栈

整个的流程就如下图展示

总结：

单线程：就是同个时间段只能做一件任务，完成之后才可以继续下一个任务。

同步执行：只有栈顶的上下文处于执行状态，其他上下文都处于等待状态

全局上下文只存在一个，在页面关闭的时候出栈

每次函数被调用，都会有新的函数执行上下被创建，即使调用的是自身函数也是如此；

附：文中，还有一些相关的知识点没有进行讲述，会在后面的学习中补上的