JavaScript 的工作原理：了解执行上下文（针对初学者的简化版）

JavaScript 是世界上最流行的编程语言之一。但它在幕后是如何工作的呢？让我们使用简单的概念和伪代码逐步分解它，以便任何初学者都能理解。

---

什么是 JavaScript？

JavaScript 是一种在浏览器（如 Chrome、Firefox 或 Safari）或服务器上（使用 Node.js 等工具）运行的编程语言。它用于使网站具有交互性。当您在浏览器中看到动画、按钮或游戏时，JavaScript 正在发挥作用。

要了解 JavaScript 的工作原理，我们需要了解两件事：

1. 执行上下文
2. 调用堆栈

---

什么是执行上下文？

执行上下文就像一个盒子，JavaScript 保存运行代码所需的一切。这包括：

1. 变量（您存储的数据，例如 x = 5）
2. 函数（执行某些操作的代码片段，例如 showMessage()）
3. 要执行的代码（您编写的实际指令）

执行上下文主要有两种类型：

1. 全局执行上下文（GEC）：这是 JavaScript 开始运行代码的默认框。就像主舞台一样。
2. 函数执行上下文（FEC）：这是每当调用函数时创建的新框。它仅适用于该功能。

---

分步示例

想象一下你写了这个简单的伪代码：

// Global Code
var name = "Alex";
function greet() {
    var message = "Hello, " + name;
    return message;
}
greet();

以下是 JavaScript 的逐步执行过程：

---

1.创建全局执行上下文

程序启动时，JavaScript 会自动创建一个全局执行上下文（GEC）。

• 内存（可变环境）：

  • name = undefined（暂时占位符）
  • greet = 函数定义（存储greet()的代码）

• 代码执行阶段：

  • 它逐行运行全局代码：
  • var name = "亚历克斯"; → 更新内存：name =“Alex”
  • 遇到greet(); → 调用greet函数。

---

2.创建函数执行上下文

当调用greet()时，JavaScript会专门为greet创建一个新的函数执行上下文(FEC)。

• 内存（可变环境）：

  • message = undefined（greet 中变量的占位符）

• 代码执行阶段：

  • 运行问候函数：
  • var message =“你好，”名字； → 将“Hello,”与姓名（“Alex”）组合，因此消息 =“Hello, Alex”。
  • 返回消息； → 回复“你好，亚历克斯”。

---

3.清理并返回

greet 函数完成后，其 函数执行上下文 就会被移除（删除）。程序返回到全局执行上下文。

---

执行上下文会发生什么？

JavaScript 使用调用堆栈来跟踪所有这些执行上下文。

什么是调用堆栈？

调用堆栈就像一堆盘子：

1. 全局执行上下文位于底部（第一块板）。
2. 每次调用函数时，都会在顶部添加一个函数执行上下文（一个新板）。
3. 函数完成后，其上下文将被删除（板被取下）。

---

用伪代码可视化

以下是 JavaScript 处理我们代码的方式：

1. 初始全局代码（创建 GEC）：
   

   // Global Code
   var name = "Alex";
   function greet() {
       var message = "Hello, " + name;
       return message;
   }
   greet();
   

2. 全局执行更新（运行代码）：
   

   GEC:
     Memory: { name: undefined, greet: function }
     Code: Execute global lines
   

3. 调用greet()（创建FEC）：
   

   GEC:
     Memory: { name: "Alex", greet: function }
     Code: Encounters greet()
   

4. 运行greet()并返回：
   

   Call Stack:
     1. GEC
     2. FEC for greet()
   FEC (greet):
     Memory: { message: undefined }
     Code: Execute function lines
   

5. 完成执行：
   

   FEC (greet):
     Memory: { message: "Hello, Alex" }
     Return value: "Hello, Alex"
   Call Stack after return:
     1. GEC
   

---

要记住的关键事项

1. 执行上下文就像 JavaScript 运行代码的容器。每个程序都以全局执行上下文开始，每个函数都有自己的函数执行上下文。
2. 调用堆栈跟踪正在运行的内容。最后添加的内容是第一个删除的内容（LIFO：后进先出）。
3. 当函数完成时，JavaScript 会进行清理。这就是为什么函数的内存不会永远保留的原因。

---

为什么这很重要？

理解执行上下文可以帮助您编写更好的程序：

• 您将知道为什么变量在某些地方可用而在其他地方（范围）不可用。
• 您将理解诸如“未定义”变量之类的错误。
• 您将了解函数如何交互以及它们返回值的原因。

---

挑战自己

尝试在脑海中运行这个伪代码：

Call Stack:
  Empty (Program Ends)

问自己：

1. 全局执行上下文中有什么？
2. 调用multiply() 时会发生什么？
3. 结果的最终值是多少？

---

通过掌握执行上下文，您将为解决最棘手的 JavaScript 问题奠定坚实的基础！

以上是JavaScript 的工作原理：了解执行上下文（针对初学者的简化版）的详细内容。更多信息请关注PHP中文网其他相关文章！