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

大家好，我们又见面了啊~本文《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）：
   

   gec:
     memory: { name: undefined, greet: function }
     code: execute global lines
   

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

   gec:
     memory: { name: "alex", greet: function }
     code: encounters greet()
   

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

   call stack:
     1. gec
     2. fec for greet()
   fec (greet):
     memory: { message: undefined }
     code: execute function lines
   

4. 运行greet()并返回：
   

   fec (greet):
     memory: { message: "hello, alex" }
     return value: "hello, alex"
   call stack after return:
     1. gec
   

5. 完成执行：
   

   call stack:
     empty (program ends)
   

要记住的关键事项

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

为什么这很重要？

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

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

挑战自己

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

var x = 10;
function multiply(y) {
    return x * y;
}
var result = multiply(5);

问自己：

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

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~