在本教程中,您将了解 JavaScript 执行上下文,深入了解 JavaScript 代码是如何运行的。

JavaScript 执行上下文介绍

我们将从下面的示例开始:

let x = 10;

function timesTen(a){
    return a * 10;
}

let y = timesTen(x);

console.log(y); // 100

在这个例子中:

  • 首先,声明 x 变量并用 10 初始化它的值。
  • 其次,声明 timesTen() 函数接受一个参数并返回一个值,该值是参数与 10 相乘的结果。
  • 然后,以 x 变量的值作为参数调用函数 timesTen() 并将结果存储在 y 变量。
  • 最后,将变量输出 y控制台

在幕后,JavaScript 做了很多事情。在本教程中,您将重点关注执行上下文。当 JavaScript 引擎执行 JavaScript 代码时,它会创建执行上下文。

每个执行上下文都有两个阶段:创建阶段和执行阶段。

创建阶段

当 JavaScript 引擎第一次执行脚本时,它会创建全局执行上下文。在此阶段,JavaScript 引擎执行以下任务:

  • 创建全局对象,即在 Web 浏览器的 window 或在 Node.JS 的 global
  • 创建 this 对象并将其绑定到全局对象。
  • 设置一个内存堆来存储变量函数引用。
  • 将函数声明存储在内存堆中,将变量存储在全局执行上下文中,初始值为undefined.

当 JavaScript 引擎执行上面的示例代码时,它会在创建阶段执行以下操作:

  • 首先,将变量 xy 以及  timesTen() 函数声明存储在全局执行上下文中。
  • 其次,初始化变量 xyundefined
全局执行上下文

创建阶段完成之后,全局执行上下文进入执行阶段。

执行阶段

在执行阶段,JavaScript 引擎逐行执行代码,为变量赋值,并执行函数调用。

全局执行上下文

对于每个函数调用,JavaScript 引擎都会创建一个新的函数执行上下文

函数执行上下文类似于全局执行上下文。但是 JavaScript 引擎并没有创建全局对象,而是创建一个引用函数所有参数的 arguments 对象:

函数执行上下文

在我们的示例中,函数执行上下文就是创建传递给函数所有参数引用的的 arguments 对象,

在我们的示例中,该函数执行上下文创建 arguments 对象, arguments 对象是函数所有参数的引用。将 this 值设置为全局对象,并将 a 参数初始化为 undefined

在函数执行上下文的执行阶段,JavaScript 引擎对参数 a 进行赋值 10 ,并将结果100 返回给全局执行上下文:

函数执行上下文

为了跟踪所有执行上下文,包括全局执行上下文和函数执行上下文,JavaScript 引擎使用调用堆栈,您将在下一个教程中学习。

在本教程中,您了解了 JavaScript 执行上下文,包括全局执行上下文和函数执行上下文。