前端 JavaScript运行原理

前端 JavaScript 运行原理是指在浏览器中，JavaScript 代码是如何被解析，执行和呈现的过程。整个过程可以分为以下几个阶段：

1. 词法分析阶段：浏览器首先会对 JavaScript 代码进行词法分析，将代码分解为一个个 token，包括语句、变量名、操作符等。每个 token 都有自己的类型和意义。

2. 语法分析阶段：浏览器在词法分析的基础上，对 Token 进行语法分析，构建语法树。语法树是一种抽象语法结构，用来描述代码的语法结构和逻辑关系。

3. 编译阶段：在语法分析的基础上，浏览器将 JavaScript 代码编译成字节码，字节码是一种低级的、基于 stack 的、跨平台的中间码。

4. 解释执行阶段：浏览器在编译完成后执行字节码，将其转换成机器码，再交给计算机处理。

示例1：

假设有这样一个 JavaScript 代码：

let a = 10;
let b = 20;
let c = a + b;
console.log(c);

浏览器在解析该代码时，会经历上述阶段，最终输出 30。

示例2：

假设有这样一个 JavaScript 代码：

let a = 10;
setTimeout(() => {
  console.log(a);
}, 5000);
a = 20;

浏览器在解析该代码时，会将 setTimeout 函数压入执行栈，并在 5s 后执行 console.log(a)。在 5s 内，代码执行栈执行完毕，将控制权交回浏览器。在控制权交回浏览器后，由于此时 a 的值已经被修改，console 输出 20。