通过实例了解JS执行上下文运行原理

JS执行上下文(execution context)是JS解释器在处理JS代码时，创建的一个对象，用来管理和维护当前代码的执行环境，包括当前作用域内的变量、函数声明、this指向和外部环境等相关信息。本文将通过两条实例，来深入了解JS执行上下文的运行原理。

执行上下文的创建过程

在JS解释器执行JS代码之前，首先会创建一个全局上下文(Global Execution Context)，作为根上下文来管理整个JS代码运行期间的执行环境。在执行过程中，如果发现某段JS代码需要开启新的执行上下文，那么JS解释器会根据以下两个步骤，来创建新的执行上下文对象：

1. 创建阶段

创建新的执行上下文对象时，JS解释器会先为其创建一个空白的执行上下文对象(Execution Context Object)。执行上下文对象通常是一个包含三个属性的对象，分别是变量对象(Variable Object)、作用域链(Scope Chain)和this指向(This Value)。

1. 执行阶段

创建完成后，JS解释器会解析执行当前上下文中的JS代码，将代码、变量和函数声明等信息，加入到对应的执行上下文中。在此过程中，JS解释器会按照以下步骤进行：

• 识别变量声明和函数声明：JS解释器会先分析当前上下文中的JS代码，将所有的变量和函数声明保存在当前执行上下文的变量对象中。
• 建立作用域链：当JS解释器在当前上下文中访问变量或函数时，它会先在当前上下文的变量对象中查找，找不到时，会沿着作用域链依次查找外部环境的变量对象，直到找到为止。
• 确定this指向：JS解释器在执行上下文中，会识别当前上下文中的this指向，它会根据JS执行环境对this的定义，来确定this指向到哪里。

示例一

考虑以下JS代码：

var a = "Hello";

(function() {
  var b = "JavaScript";

  function inner() {
    console.log(a + " " + b);
  }

  inner();
})();

在执行此代码时，JS解释器会按照如下过程：

1. 创建全局上下文(Global Execution Context)。
2. 解析到第一行代码，创建变量a并赋值"Hello"，保存在全局上下文的变量对象中。
3. 程序运行到第3行代码，进入一个新的执行上下文函数(anonymous)，JS解释器会创建一个新的执行上下文对象(Execution Context Object)。
4. 在(anonymous)的执行上下文中，JS解释器先创建变量b，并将其保存在执行上下文的变量对象中。同时，JS解释器还会将inner函数声明创建并保存在执行上下文的变量对象中。接着，JS解释器会根据作用域链原理，将全局上下文(Global Execution Context)的变量对象添加到当前上下文的作用域链中。
5. 执行inner函数时，JS解释器会进入inner函数的执行上下文。在此执行上下文中，JS解释器会先在当前执行上下文的变量对象中查找变量a和b，找不到时，会沿着作用域链依次查找外部环境的变量对象，直到找到为止。
6. 执行完inner函数后，JS解释器跳回(anonymous)的执行上下文中，当代码执行完毕后，当前执行上下文被销毁。
7. 最后，全局上下文(Global Execution Context)随着程序的结束而销毁，JS代码运行结束。

示例二

考虑以下JS代码：

var a = "Global a";
var b = "Global b";

function outer() {
  var a = "Outer a";

  function inner() {
    var b = "Inner b";
    console.log(a + " " + b);
  }

  inner();
}

outer();
console.log(a + " " + b);

在执行此代码时，JS解释器会按照如下过程：

1. 创建全局上下文(Global Execution Context)。
2. 解析到第一行代码，创建变量a并赋值"Global a"，创建变量b并赋值"Global b"，保存在全局上下文的变量对象中。
3. 程序运行到第6行代码，进入outer函数的执行上下文。在此执行上下文中，JS解释器会先创建变量a，并将其保存在执行上下文的变量对象中。同时，JS解释器还会将inner函数声明创建并保存在执行上下文的变量对象中。接着，JS解释器会根据作用域链原理，将全局上下文(Global Execution Context)的变量对象添加到当前上下文的作用域链中。
4. 执行inner函数时，JS解释器会进入inner函数的执行上下文。在此执行上下文中，JS解释器会先创建变量b，并将其保存在执行上下文的变量对象中。此时，执行上下文的作用域链为：inner执行上下文对象变量对象 -> outer执行上下文对象变量对象 -> 全局上下文对象变量对象。因此，变量a会沿着作用域链向外查找，从而找到outer函数中的a变量。而变量b则直接从当前执行上下文的变量对象中获取。
5. 执行完inner函数后，JS解释器跳回outer函数的执行上下文中，当函数执行完毕后，当前执行上下文被销毁。
6. 执行到最后一行代码时，JS解释器会在全局上下文中查找变量a和b，并输出结果。
7. 最后，全局上下文(Global Execution Context)随着程序的结束而销毁，JS代码运行结束。

通过以上两个示例，我们可以清晰地了解JS执行上下文的创建和运行原理，这对理解JS代码的运行机制，有着非常重要的意义。