javascript 是世界上最流行的编程语言之一。但它在幕后是如何工作的呢?让我们使用简单的概念和伪代码逐步分解它,以便任何初学者都能理解。
什么是 javascript?
javascript 是一种在浏览器(如 chrome、firefox 或 safari)或服务器上(使用 node.js 等工具)运行的编程语言。它用于使网站具有交互性。当您在浏览器中看到动画、按钮或游戏时,javascript 正在发挥作用。
要了解 javascript 的工作原理,我们需要了解两件事:
- 执行上下文
- 调用堆栈
什么是执行上下文?
执行上下文就像一个盒子,javascript 保存运行代码所需的一切。这包括:
立即学习“Java免费学习笔记(深入)”;
- 变量(您存储的数据,例如 x = 5)
- 函数(执行某些操作的代码片段,例如 showmessage())
- 要执行的代码(您编写的实际指令)
执行上下文主要有两种类型:
- 全局执行上下文(gec):这是 javascript 开始运行代码的默认框。就像主舞台一样。
- 函数执行上下文(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 使用调用堆栈来跟踪所有这些执行上下文。
什么是调用堆栈?
调用堆栈就像一堆盘子:
- 全局执行上下文位于底部(第一块板)。
- 每次调用函数时,都会在顶部添加一个函数执行上下文(一个新板)。
- 函数完成后,其上下文将被删除(板被取下)。
用伪代码可视化
以下是 javascript 处理我们代码的方式:
-
初始全局代码(创建 gec):
gec: memory: { name: undefined, greet: function } code: execute global lines
-
全局执行更新(运行代码):
gec: memory: { name: "alex", greet: function } code: encounters greet()
-
调用greet()(创建fec):
call stack: 1. gec 2. fec for greet() fec (greet): memory: { message: undefined } code: execute function lines
-
运行greet()并返回:
fec (greet): memory: { message: "hello, alex" } return value: "hello, alex" call stack after return: 1. gec
-
完成执行:
call stack: empty (program ends)
要记住的关键事项
- 执行上下文就像 javascript 运行代码的容器。每个程序都以全局执行上下文开始,每个函数都有自己的函数执行上下文。
- 调用堆栈跟踪正在运行的内容。最后添加的内容是第一个删除的内容(lifo:后进先出)。
- 当函数完成时,javascript 会进行清理。这就是为什么函数的内存不会永远保留的原因。
为什么这很重要?
理解执行上下文可以帮助您编写更好的程序:
- 您将知道为什么变量在某些地方可用而在其他地方(范围)不可用。
- 您将理解诸如“未定义”变量之类的错误。
- 您将了解函数如何交互以及它们返回值的原因。
挑战自己
尝试在脑海中运行这个伪代码:
var x = 10; function multiply(y) { return x * y; } var result = multiply(5);
问自己:
- 全局执行上下文中有什么?
- 调用multiply() 时会发生什么?
- 结果的最终值是多少?
通过掌握执行上下文,您将为解决最棘手的 javascript 问题奠定坚实的基础!
以上就是JavaScript 的工作原理:了解执行上下文(针对初学者的简化版)的详细内容,更多请关注php中文网其它相关文章!