JavaScript 对引擎、运行时、调用堆栈的概述理解

2023年5月28日下午12:15 • JavaScript

一、JavaScript的运行环境

JavaScript的运行环境主要分为三个部分：引擎、运行时和调用堆栈。

引擎是解析和执行JavaScript代码的程序或模块，例如Chrome浏览器的V8引擎。

运行时是为JavaScript代码提供环境的模块和API集合，例如Node.js的运行时。

调用堆栈是一种数据结构，用于跟踪程序在运行时的位置，如果程序在执行A函数，然后A函数又调用了B函数，那么B函数就在调用堆栈的顶部，A函数在其下方，而其他调用堆栈上的函数则被挂起。

二、JavaScript中的引擎

JavaScript中的引擎对代码进行解析和执行。主要的JavaScript引擎包括：

V8引擎：由谷歌开发，用于Chrome浏览器和Node.js。
SpiderMonkey引擎：由Mozilla开发，用于Firefox浏览器。
JavaScriptCore引擎：由苹果公司开发，用于Safari浏览器。

引擎通过解析和执行JavaScript代码来处理函数、变量、代码块和条件语句。

例如，对下面的代码块进行解析和执行：

function add(num1, num2) {
    return num1 + num2;
}
var sum = add(1, 2);
console.log(sum);

引擎会解析和执行add()函数，并将其添加到调用堆栈中。然后它会创建一个变量sum，并将add()函数的返回值赋值给这个变量，最后输出sum的值到控制台。

三、JavaScript的运行时

JavaScript的运行时为JavaScript代码提供环境，并提供一组内置API集合。

JavaScript运行时由以下几个部分组成：

事件循环：用于处理异步操作，例如定时器和网络请求。
内存堆：用于存储变量和对象。
栈：用于跟踪函数调用的顺序及执行。

例如，在Node.js中执行以下代码：

console.log("start");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("end");

输出结果为：

start
end
Promise
setTimeout

在这个例子中，引擎首先解析并执行第一个console.log语句，并将其添加到调用堆栈中。然后它遇到setTimeout语句，并将它添加到任务队列中，因为setTimeout是一个异步函数，需要等待时间到达之后执行。

接下来，引擎会解析并执行Promise.resolve()语句，由于Promise是一个异步函数，它不会被立即执行，而是被添加到微任务队列中。然后，引擎继续执行console.log("end")语句，并将其添加到调用堆栈中。

最后，引擎在调用堆栈中没有任何函数调用时，开始查找任务队列中有没有任务。它会发现setTimeout已经到了执行时间，于是引擎会将setTimeout添加到调用堆栈中执行。执行完毕后，引擎会重新查找任务队列中是否还有其他任务，此时发现微任务队列中还有一个Promise任务，于是将其添加到调用堆栈中执行。

四、 JavaScript的调用堆栈

JavaScript的调用堆栈是一种数据结构，用于跟踪程序在运行时的位置。

当引擎解析和执行函数时，会将函数压入调用堆栈顶部，并在执行结束时从堆栈中弹出。如果函数在执行返回语句前调用了其他函数，则会新建一个堆栈层，并在此层中执行新函数。

例如，下面的代码示例：

function foo() {
  console.log("foo");
}

function bar() {
  foo();
  console.log("bar");
}

function baz() {
  bar();
  console.log("baz");
}

baz();

在此示例中，当baz函数被执行时，引擎会将其添加到调用堆栈中，并在其堆栈层上执行。然后，引擎执行bar函数，并将其添加到调用堆栈的顶部。在bar函数中，调用foo函数，引擎会创建新的调用堆栈层，并执行foo函数。当foo函数执行结束后，引擎会回到bar函数中，并从堆栈中弹出foo函数。接着，引擎执行console.log("bar")语句，并从堆栈中弹出bar函数。最后，引擎执行console.log("baz")语句，并从堆栈中弹出baz函数。