来源|hashnode.com/@ganeshjaiwal译者|鬼哥你知道吗，简单的JavaScript语句需要做很多工作才能完成？嗯...所以浏览器不能直接理解javascript。那么我们如何要求浏览器做某事呢？让我们从浏览器理解的语言开始。浏览器只理解0和1的语言，即二进制/位格式的语句。我们不能轻易地将整个JavaScript转换成位。所以我们现在怎么办？？？JavaScript引擎：-“嘿，别担心，我可以为您提供JavaScript文件。”那么什么是JavaScript引擎呢？当一个JavaScript文件被加载到浏览器中时，JavaScript引擎开始从上到下逐行执行文件（异步代码除外，我们将在本系列后面看到）。JavaScript引擎将逐行解析代码并将该代码转换为机器代码（二进制/位格式）。现在浏览器理解机器代码并相应地采取行动。下面是一些JS引擎示例。那么这个javascript引擎里面有什么？这是javascript引擎的一个非常基本的视图。内存堆JavaScript引擎有时无法在编译时分配内存，因此在运行时分配的变量会进入内存堆（内存的非结构化区域）。即使我们退出在堆中分配内存的函数，我们在堆中分配的数据/对象仍然存在。在这里，我们面临着一个主要的内存泄漏问题。那么什么是内存泄漏呢？内存堆空间有限。如果我们继续使用堆空间并且不关心释放未使用的内存。当堆中没有更多可用内存时，这将导致内存泄漏问题。为了解决这个问题，javascript引擎引入了垃圾收集器。什么是垃圾收集器？垃圾收集是内存管理的一种形式。像收集器一样，它会尝试释放不再使用的对象占用的内存。换句话说，当一个变量丢失所有引用时，垃圾回收会将那块内存标记为“无法访问”并释放它。执行上下文堆栈堆栈是一种遵循后进先出(LIFO)原则的数据结构（最后进入堆栈的项目将是第一个从堆栈中删除的项目）。ECS存储了所有函数的执行上下文。执行上下文被定义为存储局部变量、函数和对象的对象。简而言之，每个功能都被推到了包的顶部。JavaScript引擎执行此堆栈顶部的功能。由于JavaScript引擎只有一个ECS，所以一次只能做一件事，也就是ECS的最顶层。这就是JavaScript单线程的原因。你一定听说过堆栈溢出。这是什么意思？-ECS的空间也有限。因此，如果我们继续在堆栈顶部添加功能。在某些时候，将没有更多空间来添加更多堆栈帧。此时我们得到一个堆栈溢出错误。考虑以下示例。functionheyJS(){console.log("Helloyouareawesome!!!!");heyJS();}heyJS();好吧，这进入了无限递归，我们有一个堆栈溢出错误。所以，正如我提到的，JavaScript是一种简单的线程语言，这意味着它只有一个调用堆栈广告，因此一次只能执行一个语句。等等，我们还听说过JavaScript中的异步编程。那么，当一次只允许一项任务时，它是如何工作的呢？这是WebAPI和回调队列。WebAPIWebAPI不是JS引擎的一部分，而是Web浏览器提供的JavaScript运行环境的一部分。JavaScript只是为我们提供了一种访问这些API的机制。由于WebAPI是特定于浏览器的，因此它们可能因浏览器而异。在某些情况下，某些WebAPI可能存在于一种浏览器中，但不存在于另一种浏览器中。示例：-document.getElementById()；document.addEventListerner()；setTimeOut()；setInterval()；示例：-console.log("First!");setTimeout(()=>{console.log("Second!");},1000);console.log("第三个！");/*OutPut:-FirstThirdSecond*/奇怪吧？"second"在setTimeout中，所以它会在1秒后执行。幕后到底发生了什么？1秒后，WebAPI会收到通知，嘿，你有代码需要马上执行。WebAPI"哦，这是console.log()，我需要执行它，但是我不能直接执行它。让我们将它发送到回调队列”“嘿，这里是回调队列，请将其添加到列表并执行它。》CallbackQueue回调队列或消息队列是一种队列数据结构，遵循先进先出原则（先插入队列的项将先从队列中移除）。它存储所有从队列中移出的消息事件表到事件队列。每个消息都有一个关联的函数。回调队列维护消息或方法在队列中添加的顺序。事件循环事件循环不断检查执行上下文堆栈是否为空，如果事件队列中有任何消息。只有当执行上下文堆栈为空时，才会将方法从回调队列移动到ECS。回调队列“嘿事件循环请检查ECS是否为空。我有一些回调需要压入ECS“事件循环”队列，请给我回调，ECS现在是空的，我将它们压入堆栈以执行它们。“终于，终于，我们将得到输出。//第一//第三//第二这只是对JavaScript引擎如何工作的概述。JavaScript引擎比我们今天在这里讨论它们的方式要复杂得多。我会在以后的一些文章中涵盖，尝试更深入地理解JavaScript引擎。在本系列的下一篇文章中，我将讲解Javascript类型、值和变量。本文转载自微信公众号「前端达人」，可以通过以下二维码关注，转载本文请联系前端人员公众号。
