引擎和宿主#

JavaScript 的执行需要两个软件的配合：JavaScript 引擎和宿主环境 JavaScript 引擎实现了 ECMAScript 语言，提供了核心功能。他接收源代码，对其进行解析并执行。但是，为了与 V8 引擎之外的外部世界进行交互的时候，比如产生任何有意义的输出、与外部资源接口，或实现与安全或性能相关的机制，我们需要由宿主环境提供额外的特定环境机制。例如，在 web 浏览器中执行 JavaScript 时，HTML DOM 就是宿主环境。Node.js 是另一种运行 JavaScript 在服务端运行的宿主环境。通常情况下，Node.js 或者 Deno 会模仿我们即将提到的机制，所以我们这里就能给出一个较为通用的解释

代理执行模型#

在 JavaScript 的规范中，JavaScript 每个自主执行器都被成为代理，它维护着自己的代码执行设施:

• (Objects)堆：这里只是一个名称，用来表示内存中的一个大区域（大多是非结构化的）。当程序中创建对象时，它就会被填充。如果在共享内存的情况下，每个代理都有一个自己的堆，每个堆当中都有自己版本的SharedArrayBuffer对象，但缓冲区所代表的底层内存是共享的
• (Homework)队列：正在 HTML 中通常被称为事件循环(event loop)，它可以在 JavaScript 中实现异步编程，同时又是单线程的。之所以称其为队列，是因为它通常是先入先出：先执行的工作在后执行的工作之前。
• (Execution Context)栈：这就是所谓的调用栈(call stack)，允许通过进入和退出执行上下文（如函数）来传输控制流。之所以称为栈，是因为他是先进后出的。每个任务进入时都会向（空）栈中推入一个新帧，退出时则会清空栈。

这是三种不同的数据结构，用于跟踪不同的数据。每一个代理都类似于一个线程，每个代理可以拥有多个域（与全局对象一一对应），这些代理可以同步访问彼此，因此需要在单个执行线程中运行。一个代理也有一个单一的内存模型，表明他是否是小端序的、是否可以同步阻塞、原子操作是否无锁等。

在 web 上，代理可以是一下的内容：

• 一个包含各种Window对象的相似源 window 代理，这些对象有可能直接或通过使用document.domain相互联系。如果窗口按源成键，则只有同源窗口才能互相联系。
• 一个包含DedicatedWorkerGlobalScope的专用 Worker 代理
• 一个包含SharedWorkerGlobalScope的共享 Worker 代理
• 一个包含ServiceWorkerGlobalScope的 Service worker 代理
• 一个包含WorkletGlobalScope的 Worklet 代理

换句话说，每个 Worker 创建自己的代理，而一个或多个窗口可能在同一个代理之中，通常是一个主文档及其类似的源 iframe。在 Node.js 中，也有一个类似的概念，被称为worker线程。

示例图

域#

每个代理都拥有一个或多个域(realm)。每一段 JavaScript 代码在加载时都会与一个相关域相关联，即使从另一个领域调用也不会改变。域由以下的信息构成：

• 固有对象列表，如Array, Array.prototype等。
• 全局声明的变量、globalThis的值以及全局对象。
• 模板字面数组的缓存，因为对同一标记的模板字面表达式的求值总是会导致标记接收到相同的数组对象

在 Web 上，域和全局对象是一一对应的。全局对象可以是Window、WorkerGlobalScope或WorkletGlobalScope。因此，每个iframe都在不同的域中执行，尽管他可能与父窗口在同一个代理当中。在讨论全局对象的身份时，通常会提到域。例如，当我们需要Array.isArray()或Error.isError()这样的方法，因为在另一个域构建的数组的原型对象与当前域中的Array.prototype对象不同，因此instanceof Array将错误的返回false。

栈与执行上下文#

我们首先考虑同步代码执行。每个作业通过调用相关的回调进入。回调中的代码可以创建变量、调用函数或退出。每个函数都需要追踪自己的变量环境和返回位置。为此，代理需要一个堆栈来跟踪执行上下文。执行上下文一般也称为栈帧，是执行的最小单位。他会追踪以下的信息：

• 代码评估状态；
• 包含此代码的模块或脚本、函数（如适用）以及当前执行的生成器；
• 当前的域；
• 绑定，包括：
  • 用var、let、const、function、class等定义的变量；
  • 私有标识符，如#foo，仅在当前上下文中有效；
  • this引用；

举个例子

1
function foo(b) {
2
  const a = 10;
3
  return a + b + 11;
4
}
5

6
function bar(x) {
7
  const y = 3;
8
  return foo(x + y);
9
}
10

11
const baz = bar(7); // 将42赋值给baz

1. 任务启动时，会创建第一个栈帧，其中定义了变量foo、bar和baz。它使用参数7调用bar。
2. 为bar调用创建第二个栈帧，其中包含参数x和局部变量y的绑定。它首先执行乘法运算x * y，然后使用结果调用foo。
3. 为foo调用创建第三个栈帧，其中包含参数b和局部变量a的绑定。它首先执行加法运算a + b + 11，然后返回结果。
4. 当foo返回时，最上面的帧元素从堆栈中弹出，调用表达式foo(x * y)解析为返回值。然后继续执行，也就是返回这个结果。
5. 当bar返回时，最上面的帧元素从堆栈中弹出，调用表达式bar(7)解析为返回值。这样就用返回值初始化了baz。
6. 我们到达了作业源代码的末尾，因此入口点的栈帧被从堆栈中弹出。堆栈为空，因此作业被视为已完成。

生成器与重入#

栈帧弹出后，并不一定会永远消失，因为有时候我们需要回到它。例如，我们以一个生成器函数作为例子：

1
function* gen() {
2
  console.log(1);
3
  yield;
4
  console.log(2);
5
}
6

7
const g = gen();
8
g.next(); // 输出1
9
g.next(); // 输出2

在这种情况下，调用gen()首先会创建一个挂起的执行上下文——gen内部的代码不会被执行。生成器g会在内部保存这个执行上下文。当前正在运行的执行上下文仍然是入口点。调用g.next()时，gen的执行上下文会被推入堆栈，gen内部的代码会一直执行到yield表达式。然后，生成器的执行上下文被挂起并从堆栈中移除，控制权返回入口点。再次调用g.next()时，生成器的执行上下文会被推回堆栈，gen内部的代码会从上次中断的地方继续执行。

尾调用#

正确的尾调用是规范中定义的一种机制，即(proper tall call, PTC)。如果调用者在调用后除了返回值外什么也不做，那么该函数调用就是尾部调用：

1
function f() {
2
  return g();
3
}

在这种情况下，对g的调用是尾调用。如果函数调用处于尾部位置，引擎需要丢弃当前的执行上下文，替换成尾部调用的上下文，而不是为g()调用推送一个新帧。这意味着尾递归不受堆栈大小的限制：

1
function factorial(n, acc = 1) {
2
  if (n <= 1) return acc;
3
  return factorial(n - 1, n * acc);
4
}

实际上，如果我们丢弃当前帧就会导致调试问题，因为如果g()引发错误，f就不再在堆栈上，也不会出现在堆栈跟踪中。目前，只有 Safari(JavaScriptCore)实现了 PTC，而且它们还发明了一些特定基础设施来解决调试的问题。

闭包#

与变量范围和函数调用相关的另一个现象是闭包，据说很有趣。。。每当创建一个函数时，它也会在内部记忆当前运行的执行上下文的变量绑定。这样，这些变量绑定就可以超越执行上下文。

1
let f;
2
{
3
  let x = 10;
4
  f = () => x;
5
}
6
console.log(f()); // 输出10

WARNING

关于闭包的内容之后会专门写一篇文章再总结和测试

作业队列与事件循环#

单个代理是一个线程，这意味着解释器一次只能处理一条语句。当代码都是同步的时候，这没有问题，因为我们总是能取得进展，即正常的按照条目进行执行。但如果代码需要执行异步操作，那么除非该操作完成，否则我们就无法取得进展。但是，如果整个程序因此而停止，就会影响用户体验——JavaScript 作为 Web 脚本语言的特性要求他永不堵塞。因此，处理异步操作完成的代码被定义为回调。该回调会定义一个任务，一旦动作完成，该任务就会被放入一个任务队列，或者被称为一个事件循环(来自 HTML 的术语)

每次，代理都会从队列中拉出一个作业并执行它。作业执行完毕后，可能会创建更多的作业，这些job会被添加到队列末尾。job也可以通过异步平台机制（例如定时器、I/O和事件）的完成而添加。当堆栈为空时，任务被视为已完成；然后，下一个任务会从队列中去除。任务的取出优先级可能并不统一——例如，HTML事件循环将任务分为两类：任务和微任务。微任务的优先级更高，微任务队列会优先于任务队列清空

”Rum-to-completion”运行至完成#

每个任务都会在其他任务处理之前完整执行完毕。这为程序逻辑推理提供了一些优势，例如：函数一旦执行，就无法被抢占，并且会在任何其他代码之前完全执行完毕（并且可以修改函数操作的数据）。这与C语言不同，例如，在C语言中，如果一个函数在一个线程中运行，运行时系统可以随时将其停止，以便在另一个线程中执行其他的代码。

例如

1
const promise = Promise.resolve();
2
let i = 0;
3
promise.then(() => {
4
    i += 1;
5
    console.log(i);
6
});
7
promise.then(() => {
8
    i += 1;
9
    console.log(i);
10
})

在上面的例子中：我们创建了一个已经被解析的Promise，即Promise.resolve()，这意味着任何附加到他的回调函数都会立即被调度为任务。这两个回调函数看似会导致竞争，但实际上，输出是完全可以预测的：1和2会按顺序被记录。这是因为每个任务都会在下一个任务执行之前被完成，所以任务的整体顺序是可以被推测出来的，在我们这里：i += 1; console.log(i); i += 1; console.log(i)，而永远不会是i += 1; i += 1; console.log(i); console.log(i);

但是这种模型具有这样一个缺点：如果某个任务耗时过长，Web应用程序将无法处理用户交互，例如点击或滚动。浏览器会通过显示“脚本运行时间过长”对话框来缓解这个问题。优化的方式则是缩短任务的处理时间，并尽可能将一个任务拆分为多个任务。

永不阻塞#

事件循环模型提供的另一个重要保证则是JavaScript执行永远不会阻塞。I/O处理通常通过事件和回调函数完成，因此当应用程序等待IndexedDB查询或fetch()请求返回结果时，它仍然可以处理其他任务，例如用户输入。异步操作完成后执行的代码始终以回调函数的形式提供(例如，Promise的then()处理程序、setTimeout()中的回调函数或事件处理程序)，该回调函数定义了一个任务，该任务将在操作完成后添加到任务队列中。

当然，“永不阻塞”的保证，要求平台API本身是异步的，但一些遗留的例外情况是仍然不可忽视的，例如alert()或同步XHR。为了确保应用程序的响应速度，避免使用这些例外情况被认为是良好的。

跨代理通信和内存模型#

和上面我们所将的一致，代理通过内存共享进行通信。在Web端中，内存共享通过postMessage()方法实现。Web Worker里面对此有概述，简单的来说，通常，数据仅按值进行传递（通过结构化克隆）因此不会涉及任何的并发问题。要共享内存，必须发布一个SharedArrayBuffer对象，该对象可以被多个代理同时访问。一旦两个代理通过SharedArrayBuffer共享对同一内存的访问，它们就可以通过Atomics对象同步执行。

共享内存有两种不同的方式：普通内存访问（非原子操作）和原子内存访问。后者具有顺序一致性，而前者是无序的；JavaScript不提供任何保证顺序的操作。

并发性及确保程序顺序运行#

当多个代理协同工作时，永不阻塞的保证不一定是一定成立的。一个代理可能会因为等待另一个代理执行某个操作而陷入阻塞或停止状态。这与等待同一个代理中的Promise不同，因为阻塞会导致整个代理停止运行，并且在此期间不允许其他的代码执行——也就是说，他无法进行后续的操作。

为了防止死锁，对何时以及哪些代理可以被阻塞有一些严格的限制：

• 每个拥有专用执行线程且未被阻塞的代理最终会取得进展
• 在一组共享同一执行线程的代理中，最终总会有一个代理取得进展
• 除非通过提供阻塞功能的显示API，否则代理不会导致其他代理被阻塞
• 只有特定类型的代理可以被阻止。在Web，专用工作进程和共享工作进程是不能被阻止的，但是并不包括同源窗口或Service Worker。

内存生命周期#

不管什么程序语言，内存生命周期基本是一致的：

1. 分配你所需要的内存
2. 使用分配到的内存（无论是读还是写）
3. 不需要当前内的时候就释放他

在所有的语言中，第二点都是显式的。在底层语言中，第一点和第三点都是显式的，而在高级语言中，大多数都是隐式的

1
const n = 123; // 为数值分配内存
2
const s = "azerty" // 为字符串分配内存
3

4
const o = {
5
    a: 1,
6
    b: null,
7
}; // 为对象及其包含的值分配内存
8

9
// 为数组及其包含的值分配内存
10
const a = [1, null, "abra"];
11

12
function f(a) {
13
    return a + 2;
14
} // 为函数以及可调用对象分配内存
15

16
// 函数表达式也可以分配内存
17
someElement.addEventListener(
18
    "click",
19
    function() {
20
        someElement.style.backgroundColor = "blue";
21
    },
22
    false,
23
);

1
const d = new Date(); // 为Date对象分配内存
2
const e = document.createElement("div"); // 为DOM元素分配内存