后端开发教程 - Java、Spring Boot 实战 - msg200.com
JavaScript 的工作原理：JavaScript 引擎、堆和调用栈概述
大家好👋，希望你们一切都好。
所以，今天你将学习JavaScript 引擎、堆、调用堆栈的概述🧑💻。
许多 JavaScript 开发者并不了解 JavaScript 的工作原理。如果您是 JavaScript 新手👶，那么本文将帮助您了解 JavaScript 的工作原理。如果您是一位经验丰富的👴 JavaScript 开发者，希望本文能帮助您复习一下。
⚙️ JavaScript 引擎
JavaScript 引擎是执行 JavaScript 代码的程序。一个常见的例子是 Google 的 V8 引擎。
⚙️ V8 引擎
V8 引擎是一个用 C++ 编写的开源高性能 JavaScript 和 Web Assembly 引擎。V8 引擎已广泛应用于 Google Chrome、Node.js、Electron 等浏览器。
V8发动机概述
V8 发动机有两个主要部件
- 堆是一种非结构化内存，用于变量和对象的内存分配。
- 调用堆栈是一种后进先出 (LIFO)数据结构，用于记录我们在程序中所处位置的函数调用。
🥞 调用堆栈
JavaScript 是一种单线程编程语言，这意味着它一次只能做一件事，并且它有一个调用堆栈。
如果调用一个函数，它会被推送到调用堆栈的顶部，当函数返回时，它会从调用堆栈的顶部弹出。
让我们举个例子。
| function one() { | |
| return 1; | |
| } | |
| function two() { | |
| return one() + 1; | |
| } | |
| function three() { | |
| return two() + 1; | |
| } | |
| console.log(three()); |
| function one() { | |
| return 1; | |
| } | |
| function two() { | |
| return one() + 1; | |
| } | |
| function three() { | |
| return two() + 1; | |
| } | |
| console.log(three()); |
调用堆栈可视化
让我们再举一个包含错误的例子。
| function one() { | |
| // throws an error | |
| throw new Error("Oops"); | |
| } | |
| function two() { | |
| return one() + 1; | |
| } | |
| function three() { | |
| return two() + 1; | |
| } | |
| console.log(three()); |
| function one() { | |
| // throws an error | |
| throw new Error("Oops"); | |
| } | |
| function two() { | |
| return one() + 1; | |
| } | |
| function three() { | |
| return two() + 1; | |
| } | |
| console.log(three()); |
调用堆栈可视化
当 V8 引擎遇到错误时，它会打印堆栈跟踪。堆栈跟踪基本上就是调用栈的状态。
让我们再举一个炸毁调用堆栈的例子💥。
我们可以通过使用递归函数来实现这一点。
| function recursion() { | |
| recursion(); | |
| } | |
| console.log(recursion()); |
| function recursion() { | |
| recursion(); | |
| } | |
| console.log(recursion()); |
调用堆栈可视化
递归函数反复调用自身。在某个时间点，函数调用的次数超过了堆栈的实际大小，浏览器会检测到这种情况，并通过抛出错误来采取行动。
我希望现在您对 JavaScript 的工作原理有了一定的了解。
在下一篇文章中，我们将学习 Web API、回调队列和事件循环。
📚 资源
事件循环到底是什么？| Philip Roberts | JSConf EU
感谢阅读！我叫 Bipin Rajbhar；我喜欢帮助人们学习新技能😊。如果您想收到新文章和资源的通知，可以在Twitter上关注我。
文章来源：https://dev.to/bipinrajbhar/how-javascript-works-under-the-hood-an-overview-of-javascript-engine-heap-and-call-stack-1j5o