JavaScript 执行上下文

在本教程中，您将了解 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 引擎执行上面的示例代码时，它会在创建阶段执行以下操作：

• 首先，将变量 x 和 y 以及  timesTen() 函数声明存储在全局执行上下文中。
• 其次，初始化变量 x 和 y 为 undefined。

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

执行阶段

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

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

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

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

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

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

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

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