彻底弄懂 JavaScript 执行机制

JavaScript 的执行环境

JavaScript 代码的执行必须依赖一个执行环境，该执行环境可以是浏览器、 Node.js 服务器或其它解释器等等，而这些执行环境会为 JavaScript 提供几乎相同的对象和方法，但是在细节上或许会略有不同。

JavaScript 的执行过程

JavaScript 的执行过程可以被概括为以下三个步骤：

1. 代码会在进入执行上下文时被编译。
2. 编译完成后，会创建一个“执行上下文”（Execution Context）。
3. 执行 JavaScript 代码

JavaScript 的执行上下文

执行上下文是 JavaScript 运行时环境中的一个抽象概念，用来在代码执行过程中管理代码执行过程中所需要的所有信息，包括当前上下文中的变量、对象和代码等。每进入一个新的函数或块级作用域，都会创建一个新的执行上下文，随着代码的执行，这些执行上下文也会被销毁。

执行上下文包含哪些信息？

执行上下文包含了三个重要的属性：

1. 变量对象（Variable Object）
2. 作用域链（Scope Chain）
3. this 指向

变量对象（Variable Object）

变量对象是每一个执行上下文都会对应一个变量对象，其中包含了当前上下文中所定义的所有变量、函数和函数的参数。其中，函数和函数的参数在执行上下文创建时就已经确定，而变量则在代码执行过程中按需创建。

作用域链（Scope Chain）

在 JavaScript 中，每进入一个新的函数或块级作用域，都会创建一个新的执行上下文。而这些执行上下文是在创建时被封装在互相嵌套的作用域中。这些嵌套的关系就形成了作用域链，函数或变量的查找就按照这个作用域链进行。

this 指向

this 指向在 JavaScript 中非常重要，它的值取决于函数的调用方式。在函数被调用时，this 的值总是指向当前正在执行的函数。

示例说明

以下是两个 JavaScript 执行机制的示例：

例子 1

console.log(a);
var a = 1;

在上述代码中，变量 a 并没有被初始化，因此当在第一行中输出变量 a 时，其值为 undefined。当控制流程执行到第二行时，执行器会创建一个新的执行上下文，并将变量对象初始化为：

{
  a: undefined
}

再将变量 a 的值赋为 1，此时变量对象变为：

{
  a: 1
}

例子 2

function foo() {
  console.log(a);
  var a = 1;
}
foo();

在上述代码中，调用函数 foo 时，会创建一个新的执行上下文，并将变量对象初始化为：

{
  arguments: {},
  this: window,
  a: undefined
}

当控制流程执行到函数内的第二行时，变量 a 的值依然为 undefined，因此在第一行中输出变量 a 时，输出结果为 undefined。之后，再将变量 a 的值赋为 1，完成代码执行。