JavaScript 之执行上下文

JavaScript 是如何工做的系列——第三篇

前言

在上篇文章《JavaScript 引擎（V8）是如何工做的》中，咱们介绍了 JavaScript 引擎（V8）是如何执行 JavaScript 代码的。本篇文章将开始介绍 JavaScript 执行机制中的核心概念——执行上下文。

执行上下文

执行上下文（Execution Context），也称为执行环境，就是当前 JavaScript 代码执行时所在环境的抽象概念。

每当开始执行代码时，JavaScript 引擎会为整个程序建立一个执行上下文（全局执行上下文），JavaScript 代码都是在执行上下文中运行的。

在 JavaScript 中，执行环境主要分为：

• 全局执行上下文（Global Execution Context）： 全局执行上下文是最顶层的一个执行环境，是 JavaScript 代码最开始运行时的默认环境。一个程序中只会有一个全局执行上下文。
• 函数执行上下文（Function Execution Context）：在JavaScript中，每一个函数都有本身的执行上下文。每当一个函数被调用时，就会为该函数建立一个新的执行上下文。一个程序中能够有多个函数执行上下文。函数执行上下文能够访问全局执行上下文，反之则不行。
• eval 函数执行上下文： eval 函数在执行其内部代码时，也会建立属于本身的执行上下文（由于 eval 函数并不建议使用，因此这里不作讨论）。

咱们看一个例子：

var a = 'Hello World!'

function helloWorld () {
    var a = 'Hello Function!'
    console.log(a) 
}

helloWorld()
console.log('a)

上述代码，建立的执行上下文结构以下图所示：

显而易见，在一个 JavaScript 程序中，一般状况下都会存在多个执行上下文，那么这些执行上下文是如何管理的呢？

JavaScript 引擎建立了执行上下文栈（Execution Context Stack） 来管理执行上下文。

执行上下文栈

首先咱们来了解下什么是栈数据结构？

栈中数据的存取方式相似给枪上子弹，先上的子弹最后打出，后上的子弹先打出。
特色：先进后出，后进先出

了解了栈数据结构后，咱们继续来讲执行上下文栈是如何管理执行上下文的？

咱们用数组来模拟执行上下文栈的行为：ECStack = [];。

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

function fn1() {
  console.log('fn1')
  fn2();
}

fn1();

上述这段代码在执行过程当中，执行上下文栈的行为是什么样的？咱们来分析一下：

1. 在代码开始执行时，首先会建立全局执行上下文并将其推入到执行上下文栈中；

ECStack.push(global_EC);

1. 全局上下文入栈后，其中的可执行代码开始从顶部按顺序逐行解释执行，当调用函数 fn1时，会建立 fn1 函数执行上下文并将其推入到执行上下文栈中；

ECStack.push(fn1_EC);

1. 以此类推，当开始执行 fn2 时，会建立 fn2 函数执行上下文并入栈；此时全部的执行上下文都已经入栈；

ECStack.push(fn2_EC);

1. 当 fn2 执行完毕，fn2 函数执行上下文出栈；

ECStack.pop();

1. 当 fn1 执行完毕，fn1 函数执行上下文出栈；

ECStack.pop();

1. 当全部代码执行完毕，就又回到了全局执行上下文；当程序退出时，即关闭浏览器或网页时，全局执行上下文才出栈。

ECStack.pop();

总结：

• JavaScript 是单线程同步执行的，只有栈顶的上下文处于执行中，其余上下文须要等待；
• 全局执行上下文永远第一个入栈，也就是说它永远在栈底；而当前执行的函数执行上下文永远最后一个入栈，也就是说它永远在栈顶。
• 执行上下文出栈后，保存在该环境中的全部变量和函数定义也随之销毁。

下一篇

在每一个执行上下文中，都包括三个重要的属性：（ES3版，ES5后作了一些变动，具体变化内容后续会写文章总结）

• 变量对象（Variable Object，VO）
• 做用域链（Scope Chain）
• this指向

伪代码以下：

global_EC = {
    scopeChain: {
        // Current scope + scopes of all its parents
    },
    variableObject: {
        // All the variables including inner variables & functions, function arguments
    },
    this: {}
}

下篇文章将开始介绍 JavaScript 的做用域，以及执行上下文中的做用域链，敬请期待。

参考：

JavaScript深刻之执行上下文
前端基础进阶（二）：执行上下文详细图解
JS 执行环境、做用域链、活动对象
The Journey of JavaScript From Downloading Scripts to Execution – Part III