关于 JavaScript 执行上下文你需要知道的一切

什么是执行上下文？

好吧！你可能已经用 JavaScript 写代码很久了，也知道什么时候该用什么逻辑，但是，你有没有想过，创建的变量或函数是如何保存其环境信息的呢？
其实，有一种叫做执行上下文的东西，它是由我们的 JS 引擎创建的，并在后台完成所有神奇的操作。让我们在本文中揭开它的神秘面纱。

什么是执行上下文？

根据名称我们可以将其解码为：

执行= 执行代码，
上下文= 特定环境

因此，执行上下文提供了有关存储和执行特定代码的环境的信息。

每当 JS 引擎执行脚本时，都会创建一个新的执行上下文。默认情况下，会创建全局执行上下文。

全局/默认执行上下文

它是我们编写 JavaScript 代码时首先创建的。因此称为默认上下文。由于 JS 是单线程语言，因此每次执行代码时只会创建一个全局执行上下文 (GEC)。

它分为两个阶段：

1）创建阶段
2）执行阶段

让我们深入探讨一下！

1）创建阶段

在此阶段，JS 代码的编译完成，但不涉及代码的执行。让我们考虑以下程序。

let x = 5;

function printHello() {
    console.log("Hello Kitty!");
}

printHello();

当我们使用浏览器的开发工具调试这个程序时，我们注意到变量的值与脚本中x一样，但并没有打印在控制台中。此外，在全局作用域中还存在一个叫做 present 的东西。undefined"Hello Kitty!"window

这意味着在创建阶段会发生以下情况：

• 变量- 使用未定义值初始化
• 函数- 已声明并初始化但尚未执行
• 窗口/全局对象 - 创建（保存有关函数参数、变量以及内部函数声明的信息）
• this - created 指向上面创建的全局对象

2）执行阶段

终于！我们的代码在这个阶段执行了。JS 引擎逐行执行代码，所有变量最终都会被初始化并赋值，函数也会被调用。每次函数调用都会创建一个函数执行上下文。让我们来了解一下。

功能/本地执行上下文

每当一个新函数被调用时，都会创建一个新的执行上下文，该上下文包含两个基本阶段：创建阶段和执行阶段。这个新的执行上下文被称为局部/功能执行上下文 (FEC)。

因此，在上面的代码中，在解析函数调用时，我们可以注意到我们的函数存在于本地范围内。

这个 FEC 与 GEC 类似，不同之处在于它创建了arguments object而不是创建global object指向this当前对象的 。

视觉呈现

因为每次函数调用 => 都会创建新的执行上下文。让我们直观地看一下这个概念：

这感觉太迷幻了！😵‍💫

为了便于存储全局执行上下文和所有本地执行上下文，我们有一个名为调用堆栈的数据结构。

每当创建一个新的执行上下文时，它都会被堆叠在前一个执行上下文之上，依此类推。JS 引擎负责跟踪这个堆栈的执行情况，以便每次只执行一个执行上下文，从而保持 JS 的单线程特性。

包起来

太棒了！现在我们知道了什么是执行上下文，以及为什么它对我们心爱的 JS 引擎如此有用❤️我们很好地掌握了全局执行上下文和局部执行上下文之间的区别，以及它们创建所需的阶段。

👏感谢阅读！