当前位置：网站首页>一篇文章看懂JS执行上下文

一篇文章看懂JS执行上下文

2022-07-27 13:14:00 【行星飞行】

在这里插入图片描述

壹 * 引

执行上下文是一个很重要的概念，通过阅读它，你会了解为什么会存在所谓的变量提升，为什么let声明但不赋值的变量使用就报错，但var却是undefined，串起来讲，它也会加深你对于this的理解。

我们都知道，JS代码的执行顺序总是与代码先后顺序有所差异，当先抛开异步问题你会发现就算是同步代码，它的执行也与你的预期不一致，比如：

function f1() {
    
    console.log('听风是风');
};
f1(); //echo

function f1() {
    
    console.log('echo');
};
f1(); //echo

按照代码书写顺序，应该先输出听风是风，再输出 echo才对，很遗憾，两次输出均为 echo；如果我们将上述代码中的函数声明改为函数表达式，结果又不太一样：

var f1 = function () {
    
    console.log('听风是风');
};
f1(); //听风是风

var f1 = function() {
    
    console.log('echo');
};
f1(); //echo

这说明代码在执行前一定发生了某些微妙的变化，JS引擎究竟做了什么呢？这就不得不提JS执行上下文的了。

贰 * JS执行上下文

JS代码在执行前，JS引擎总要做一番准备工作，这份工作其实就是创建对应的执行上下文；

执行上下文有且只有三类，全局执行上下文，函数上下文，与eval上下文；由于eval一般不会使用，这里不做讨论。

贰 * 壹全局执行上下文

全局执行上下文只有一个，在客户端中一般由浏览器创建，也就是我们熟知的window对象，我们能通过this直接访问到它。

全局对象window上预定义了大量的方法和属性，我们在全局环境的任意处都能直接访问这些属性方法，同时window对象还是var声明的全局变量的载体。我们通过var创建的全局对象，都可以通过window直接访问。

贰 * 贰函数执行上下文

函数执行上下文可存在无数个，每当一个函数被调用时都会创建一个函数上下文；需要注意的是，同一个函数被多次调用，都会创建一个新的上下文。

说到这你是否会想，上下文种类不同，而且创建的数量还这么多，它们之间的关系是怎么样的，又是谁来管理这些上下文呢，这就不得不说说执行上下文栈了。

叁 * 执行上下文栈(执行栈)

执行上下文栈(下文简称执行栈)也叫调用栈，执行栈用于存储代码执行期间创建的所有上下文，具有LIFO（Last In First Out后进先出，也就是先进后出）的特性。

JS代码首次运行，都会先创建一个全局执行上下文并压入到执行栈中，之后每当有函数被调用，都会创建一个新的函数执行上下文并压入栈内；由于执行栈LIFO的特性，所以可以理解为，JS代码执行完毕前在执行栈底部永远有个全局执行上下文。

function f1() {
    
    f2();
    console.log(1);
};

function f2() {
    
    f3();
    console.log(2);
};

function f3() {
    
    console.log(3);
};

f1();//3 2 1

我们通过执行栈与上下文的关系来解释上述代码的执行过程，为了方便理解，我们假象执行栈是一个数组，在代码执行初期一定会创建全局执行上下文并压入栈，因此过程大致如下：

//代码执行前创建全局执行上下文
ECStack = [globalContext];

// f1调用
ECStack.push('f1 functionContext');

// f1又调用了f2，f2执行完毕之前无法console 1
ECStack.push('f2 functionContext');

// f2又调用了f3，f3执行完毕之前无法console 2
ECStack.push('f3 functionContext');

// f3执行完毕，输出3并出栈
ECStack.pop();

// f2执行完毕，输出2并出栈
ECStack.pop();

// f1执行完毕，输出1并出栈
ECStack.pop();
// 此时执行栈中只剩下一个全局执行上下文

那么到这里，我们解释了执行栈与执行上下文的存储规则；还记得我在前文提到代码执行前JS引擎会做准备创建执行上下文吗，具体怎么创建呢，我们接着说。

肆 * 执行上下文创建阶段

执行上下文创建分为创建阶段与执行阶段两个阶段，较为难理解应该是创建阶段，我们先说创建阶段。

JS执行上下文的创建阶段主要负责三件事：确定this—创建词法环境组件（LexicalEnvironment）—创建变量环境组件（VariableEnvironment）

这里我就直接借鉴了他人翻译资料的伪代码，来表示这个创建过程：

ExecutionContext = {
      
    // 确定this的值
    ThisBinding = <this value>,
    // 创建词法环境组件
    LexicalEnvironment = {
    },
    // 创建变量环境组件
    VariableEnvironment = {
    },
};

如果你有阅读其它关于执行上下文的文章读到这里一定有疑问，执行上下文创建过程不是应该解释this，作用域与变量对象/活动对象才对吗，怎么跟别的地方说的不一样，这点我后面解释。

肆 * 壹确定this

官方的称呼为This Binding，在全局执行上下文中，this总是指向全局对象，例如浏览器环境下this指向window对象。

而在函数执行上下文中，this的值取决于函数的调用方式，如果被一个对象调用，那么this指向这个对象。否则this一般指向全局对象window或者undefined（严格模式）。

我在之前有专门写一篇介绍this的博文，现在看来写的很不好，之后我会重新理解写一篇通俗易懂的文章。

肆 * 贰词法环境组件

词法环境是一个包含标识符变量映射的结构，这里的标识符表示变量/函数的名称，变量是对实际对象【包括函数类型对象】或原始值的引用。

词法环境由环境记录与对外部环境引入记录两个部分组成。

其中环境记录用于存储当前环境中的变量和函数声明的实际位置；外部环境引入记录很好理解，它用于保存自身环境可以访问的其它外部环境，那么说到这个，是不是有点作用域链的意思？

我们在前文提到了全局执行上下文与函数执行上下文，所以这也导致了词法环境分为全局词法环境与函数词法环境两种。

全局词法环境组件：

对外部环境的引入记录为null，因为它本身就是最外层环境，除此之外它还记录了当前环境下的所有属性、方法位置。

函数词法环境组件：

包含了用户在函数中定义的所有属性方法外，还包含了一个arguments对象。函数词法环境的外部环境引入可以是全局环境，也可以是其它函数环境，这个根据实际代码而来。

这里借用译文中的伪代码（环境记录在全局和函数中也不同，全局中的环境记录叫对象环境记录，函数中环境记录叫声明性环境记录，说多了糊涂，下方有展示）：

// 全局环境
GlobalExectionContext = {
    
    // 全局词法环境
    LexicalEnvironment: {
    
        // 环境记录
        EnvironmentRecord: {
    
            Type: "Object", //类型为对象环境记录
            // 标识符绑定在这里 
        },
        outer: < null >// 对外环境引用是null
    }
};
// 函数环境
FunctionExectionContext = {
    
    // 函数词法环境
    LexicalEnvironment: {
    
        // 环境纪录
        EnvironmentRecord: {
    
            Type: "Declarative", //类型为声明性环境记录
            // 标识符绑定在这里 
        },
        outer: < Global or outerfunction environment reference >
    }
};

肆 * 叁变量环境组件

变量环境可以说也是词法环境，它具备词法环境所有属性，一样有环境记录与外部环境引入。在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 = {
    
    // this绑定为全局对象
    ThisBinding: <Global Object>,
    // 词法环境
    LexicalEnvironment: {
      
        //环境记录
      EnvironmentRecord: {
      
        Type: "Object",  // 对象环境记录
        // 标识符绑定在这里 let const创建的变量a b在这
        a: < uninitialized >,  
        b: < uninitialized >,  
        multiply: < func >  
      }
      // 全局环境外部环境引入为null
      outer: <null>  
    },
  
    VariableEnvironment: {
      
      EnvironmentRecord: {
      
        Type: "Object",  // 对象环境记录
        // 标识符绑定在这里 var创建的c在这
        c: undefined,  
      }
      // 全局环境外部环境引入为null
      outer: <null>  
    }  
  }

  // 函数执行上下文
  FunctionExectionContext = {
    
     //由于函数是默认调用 this绑定同样是全局对象
    ThisBinding: <Global Object>,
    // 词法环境
    LexicalEnvironment: {
      
      EnvironmentRecord: {
      
        Type: "Declarative",  // 声明性环境记录
        // 标识符绑定在这里 arguments对象在这
        Arguments: {
    0: 20, 1: 30, length: 2},  
      },  
      // 外部环境引入记录为</Global>
      outer: <GlobalEnvironment>  
    },
  
    VariableEnvironment: {
      
      EnvironmentRecord: {
      
        Type: "Declarative",  // 声明性环境记录
        // 标识符绑定在这里 var创建的g在这
        g: undefined  
      },  
      // 外部环境引入记录为</Global>
      outer: <GlobalEnvironment>  
    }  
  }