深入理解js执行上下文与执行栈

前面的话

理解执行上下文的类型与创建过程，对于理解js运行机制有极大的帮助。这篇文章将介绍执行上下文。

什么是执行上下文？

执行上下文是当前JavaScript代码被解析和执行时所在环境的抽象概念。

执行上下文的类型

执行上下文的类型有三种类型：

• 全局执行上下文： 只有一个，浏览器中的全局对象就是window对象，this指向这个全局对象。
• 函数执行上下文： 可以有无数个，只有在函数被调用的时候才会创建，每次调用函数都会创建 一个新的执行上下文。
• Eval函数执行上下文： 指的是运行在eval函数中的代码，用的很少且不建议使用

什么是执行栈？

执行栈，也叫调用栈，具有LIFO(后进先出)结构，用于存储在代码执行期间创建的所有执行上下文。

• 首次运行js代码时，会创建一个全局执行上下文并push到当前的执行栈中。
• 每当发生函数调用，引擎都会为该函数创建一个新的函数执行上下文并push到当前执行栈的栈顶。
• 当栈顶函数运行完成后，其对应的函数执行上下文将会从执行栈中pop出，上下文控制权将移到下一个执行上下文。

一张图清楚的展示执行过程：

执行上下文的创建

执行上下文分为两个阶段创建：

1： 创建阶段
2： 执行阶段

创建阶段

• 1、确定this的值，也称为This Binding
• 2、LexicalEnvironment（词法环境）
• 3、VariableEnvironment（变量环境）

利用伪代码表示：

    ExecutionContext = {
        ThisBinding = <this value> ,// 确定this
        LexicalEnvironment = {...},// 词法环境
        VariableEnvironment = {...} // 变量环境 
    }

这里的ExecutionContext可以是全局执行上下文（GlobalExectionContext），也可以是函数执行上下文（FunctionExectionContext）， 或者是Eval函数执行上下文。不管是哪一种执行上下文的创建都要经过上面三个步骤。

解释创建三个步骤

This Binding

• 在全局执行上下文中，this的值指向全局对象，在浏览器中的this指向window对象，而在node.js中指向这个文件的module对象。
• 在函数执行上下文中，this的值取决于函数的调用方式。具体有默认绑定、隐式绑定、显示绑定、new绑定、 箭头函数

词法环境（LexicalEnvironment）

词法环境有两个组成部分：

• 环境记录： 存储变量和函数声明的实际位置
• 对外部环境的引用： 可以访问其外部词法环境

环境记录中的Type标识环境类型，分两种环境类型：

• 全局环境： 一般是在全局执行上下文中的词法环境的环境类型。是一个没有外部环境的词法环境，其外部词法环境引用为null。
• 函数环境： 一般是在函数执行上下文中的词法环境的环境类型。用户在函数中定义的变量存在环境记录中，包换arguments对象。对外部环境的引用可以是 全局环境，也可以是包含内部函数的外部函数环境。

解释这些名词之后，用伪代码来看看：

    GlobalExectionContext = { // 全局执行上下文
        LexicalEnvironment: { // 词法环境
            EnvironmentRecord: { // 环境记录
                Type: 'Object', // 全局环境
                // 标识符绑定在这里
                // ...
            },
            outer: <null>  // 对外部环境的引用
        }
    }

    FunctionExectionContext = { // 函数执行上下文
        LexicalEnvironment: {        // 词法环境
            EnvironmentRecord: {          // 环境记录
            Type: "Declarative",         // 函数环境
            // 标识符绑定在这里
            // ...
            },
            outer: <Global or outer function environment reference>     // 对外部环境的引用
   }

变量环境（VariableEnvironment）

变量环境也是一个词法环境，它具有上面的定义的词法环境的所有属性。

区别： 在ES6中，词法环境 存储函数声明和变量（let和const）绑定，变量环境仅用于存储变量（var）绑定。

利用一个例子进行区别：

    let a = 20;
    const b = 30;
    var  c;
    function multiply(e, f) {
        var g = 20;
        return e * f * g;
    }
    c = multiply(20, 30);

首先有一个全局执行上下文：

    GlobalExectionContext = {
        thisBinding: <Global Object>,// 确定this 
        LexicalEnvironment : {// 词法环境
            EnvironmentRecord: { // 环境记录
                Tpye: 'Object', // 全局环境
                 // 标识符绑定在这里
                 a: <uninitialized>,
                 b: <uninitialized>,
                 multiply: <func>
            },
            outer: <null>
        },
        VariableEnvironment: { //  变量环境
            EnvironmentRecord: { // 环境记录
                Type: 'Object',
                // 标识符绑定在这里
                c: undefined
            },
            outer: <null>
        }
    }

接着一个函数执行上下文：

    FunctionExectionContext = {
        thisBinding: <Global Object>,// 确定this

        LexicalEnvironment: {// 词法环境
            EnvironmentRecord: {
                Type: 'Declarative' ,// 函数环境
                // 标识符绑定在这里
                Arguments: {0: 20, 1: 30, length: 2}
            },
            outer: <GlobalLexicalEnvironment>
        },

        VariableEnvironment: {// 变量环境
            EnvironmentRecord: { // 环境记录
                Type: ''Declarative,
                // 标识符绑定在这里
                g:  undefined
            },
            outer: <GlobalLexicalEnvironment>
        }
    }

执行阶段

此阶段，完成对所有变量的分配，最后执行代码。

参考文章：

理解 Javascript 执行上下文和执行栈