JavaScript 执行上下文

摘要：在本教程中，您将学习有关 JavaScript 执行上下文的知识，以深入了解 JavaScript 代码的执行方式。

JavaScript 执行上下文的介绍

让我们从以下示例开始

let x = 10;

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

let y = timesTen(x);

console.log(y); // 100
Code language: JavaScript (javascript)

在本示例中

• 首先，声明 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 对象，该对象引用传递给函数的所有参数，将 this 值设置为全局对象，并将 a 参数初始化为 undefined。

在函数执行上下文的执行阶段，JavaScript 引擎将 10 分配给参数 a，并将结果 (100) 返回给全局执行上下文。

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

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