深入浅出 JavaScript 执行机制：一文吃透

前端

2024-02-03 01:33:51

揭开 JavaScript 执行机制的神秘面纱

JavaScript 执行机制是构建高效、响应迅速的 Web 应用程序的关键。本文将带你深入了解 JavaScript 的执行环境、事件循环和延迟执行机制，让你掌握这门复杂语言的精髓。

JavaScript 执行环境

想象一个 JavaScript 脚本就像一个独自运行的剧场。这个剧场就是执行环境 ，它拥有自己的变量对象、作用域链和当前执行的代码。

事件循环：幕后导演

事件循环就像一位经验丰富的舞台总监，负责协调执行环境中发生的一切。它有两个主要阶段：

执行栈阶段： 处理同步代码，就像演员们按顺序登台表演。
任务队列阶段： 处理异步代码，例如演员们等待幕后提示再登台。

执行流程：一场精心策划的演出

当 JavaScript 脚本执行时，它首先创建一个新的执行环境，然后将其推入执行栈。执行栈阶段开始运行，按顺序执行代码。

如果遇到异步代码，它会被安排进入任务队列 。执行栈清空后，任务队列阶段开始，从优先级最高的微任务队列 开始。微任务队列中的所有任务都执行完毕后，才会执行宏任务队列 中的任务。最后，执行栈再次运行，处理剩余的同步代码。

延迟执行：舞台灯光的时间

微任务： 就像舞台上闪亮的灯光，微任务总是优先于宏任务执行，并且会在当前执行栈完全清空后立即执行。

宏任务： 就像后台的布景人员，宏任务只有在执行栈和所有微任务队列都清空后才会登场。

示例：一部 JavaScript 舞台剧

考虑以下代码：

console.log("同步代码 1"); // 执行栈阶段

setTimeout(() => {
  console.log("宏任务 1"); // 宏任务队列
}, 0);

Promise.resolve().then(() => {
  console.log("微任务 1"); // 微任务队列
});

console.log("同步代码 2"); // 执行栈阶段