面试官：“JS 代码运行的时候发生了什么？”

前言

笔者最近在看一些面试题，遇到不太熟悉的知识会以文章的形式记录下来，希望能对看文章的各位有所帮助～

简易过程

1. 加载阶段：浏览器或 JavaScript 引擎加载 JavaScript 代码。这可能是通过 <script> 标签加载外部 JavaScript 文件，或者直接执行内联 JavaScript 代码。
2. 解析阶段：JavaScript 引擎解析 JavaScript 代码，将其转换为抽象语法树（AST）。这个过程中，引擎会检查语法错误。
3. 编译阶段：JavaScript 引擎将 AST 转换为字节码或直接编译为机器代码。现代的 JavaScript 引擎如 V8 使用即时编译（JIT）技术，可以在运行时将热点代码编译为机器代码，以提高执行效率。
4. 执行阶段：JavaScript 引擎执行字节码或机器代码。这个过程中，引擎会创建执行上下文，处理变量提升和函数声明，执行代码，处理事件循环和回调函数等。
5. 垃圾回收：JavaScript 引擎会自动进行垃圾回收，回收不再使用的对象占用的内存。

详细过程

1. 解析阶段：

在这个阶段，JavaScript 引擎会将源代码转换为抽象语法树（AST）:

1. 词法分析（Tokenizing） ：JavaScript 引擎首先会将源代码分解为一系列的词法单元（tokens）。这些词法单元是源代码中的最小单位，例如变量名、操作符、数字、字符串等。
2. 语法分析（Parsing） ：接着，JavaScript 引擎会根据 JavaScript 的语法规则，将这些词法单元组合成各种语法结构（如表达式、语句和函数等），并生成一个抽象语法树（AST）。AST 是源代码的树形表示，每个节点代表源代码中的一个语法结构。
3. 语法检查：在生成 AST 的过程中，JavaScript 引擎也会检查代码的语法错误。如果发现语法错误，引擎会抛出一个错误，并停止执行。
4. 作用域链和变量提升：在解析阶段，JavaScript 引擎还会确定每个变量的作用域，并进行变量提升。变量提升是 JavaScript 的一种特性，它允许在声明之前使用变量。

2. 编译阶段

JavaScript 引擎会将抽象语法树（AST）转换为可执行的代码:

• 下面的解释器是 JS 代码执行的部分过程。

3. 执行阶段

1. 创建执行上下文：JavaScript 引擎首先会为执行的代码创建一个执行上下文。执行上下文是一个抽象的概念，它包含了代码执行所需的所有信息，如变量环境、作用域链、this 值等。
2. 变量初始化：在执行代码之前，JavaScript 引擎会先初始化所有的变量。对于 var 声明的变量，它们会被初始化为 undefined；对于函数声明，函数的整个定义会被提升到作用域顶部。
3. 代码执行：接着，JavaScript 引擎会逐行执行代码，进行各种计算、函数调用等操作。
4. 处理异步任务：在执行过程中，JavaScript 引擎可能会遇到异步任务，如 setTimeout、Promise、AJAX 等。这些任务会被放入任务队列中，等待当前的同步任务执行完毕后再执行。
5. 事件循环：JavaScript 引擎会不断地从任务队列中取出任务并执行，这就是所谓的事件循环。事件循环保证了 JavaScript 的单线程执行模型，同时也支持了异步编程。

4. 垃圾回收

这里引用我之前写的两篇文章，我认为写的还算清楚：