【JavaScript】JS执行机制及事件循环详解

Peter-Lu

于 2024-09-12 08:37:25 发布

阅读量547

点赞数 4

分类专栏： # JavaScript 文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/lph159/article/details/142162253

版权

JavaScript 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

文章目录

JavaScript 是一种单线程、非阻塞的脚本语言，它广泛应用于 Web 开发中。JavaScript 的执行机制和事件循环是理解异步编程的核心。本文将详细解析 JavaScript 的执行机制及其事件循环的工作原理，帮助开发者更好地理解 JavaScript 是如何处理异步任务的。

一、JavaScript 执行机制概述

1. 单线程模型

JavaScript 是一种单线程语言，即它在同一时间只能执行一个任务。与多线程语言不同，JavaScript 的执行环境（如浏览器或 Node.js）只有一个主线程用来处理所有任务。这个单线程模型决定了 JavaScript 无法同时处理多个任务，因此需要通过某种机制来处理耗时操作而不阻塞其他任务的执行。

2. 执行上下文与调用栈

JavaScript 在执行代码时，会创建一个执行上下文（Execution Context），该上下文包含了代码执行时需要的所有信息。每当 JavaScript 函数被调用时，都会创建一个新的执行上下文并压入调用栈（Call Stack）中，函数执行完毕后，该执行上下文将从栈中弹出。

function firstFunction() {
    console.log("First");
}

function secondFunction() {
    console.log("Second");
    firstFunction();
}

secondFunction();

在上述代码中，secondFunction 首先被调用，接着在其内部调用了 firstFunction。在执行过程中，secondFunction 的执行上下文会首先被压入调用栈，紧接着是 firstFunction 的执行上下文。当 firstFunction 执行完毕后，其执行上下文被弹出，最终 secondFunction 也被弹出调用栈。

二、同步与异步任务

JavaScript 中的任务可以分为同步任务和异步任务。

1. 同步任务

同步任务会立即执行，并且会阻塞后续代码的执行，直到该任务完成为止。常见的同步任务包括普通的函数调用、变量声明、操作符运算等。

2. 异步任务

异步任务不会立即执行，它们通常依赖于某些外部资源或事件的完成。常见的异步任务包括定时器（setTimeout、setInterval）、事件监听、AJAX 请求等。

在异步任务的执行过程中，JavaScript 会将其交给浏览器或 Node.js 环境来处理，而不会阻塞调用栈中的其他同步任务。待异步任务完成后，会将其回调函数放入任务队列中等待执行。

三、事件循环（Event Loop）

1. 事件循环的基本概念

JavaScript 的事件循环是其处理异步任务的核心机制。它通过监听调用栈的状态来确定何时执行任务队列中的异步任务。

事件循环的核心逻辑可以简化为以下过程：

检查调用栈是否为空。
如果调用栈为空，并且任务队列中有任务，则将队列中的第一个任务推入调用栈执行。
重复该过程。

2. 宏任务与微任务

JavaScript 的任务队列可以分为两类：宏任务（Macro Task）和微任务（Micro Task）。

宏任务：包括 setTimeout、setInterval、I/O 操作等。
微任务：包括 Promise 的回调函数、MutationObserver 等。

每次事件循环中，JavaScript 会先执行所有的微任务，随后再执行宏任务队列中的一个任务。因此，微任务的执行优先级高于宏任务。

console.log('Start');

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

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

console.log('End');

执行结果为：

Start
End
Promise
Timeout

解析：

Start 和 End 是同步任务，立即执行。
Promise 的回调属于微任务，优先于宏任务执行。
setTimeout 的回调是宏任务，在微任务执行完后才执行。

四、异步任务的执行顺序

1. 定时器的执行顺序

定时器（如 setTimeout 和 setInterval）是最常见的异步任务之一。虽然你可以为定时器指定一个延迟时间，但它的执行不会精确到毫秒，因为定时器的回调函数需要等到调用栈为空，且任务队列中没有优先级更高的任务时才会执行。

console.log('Start');

setTimeout(() => {
    console.log('Timeout 1');
}, 1000);

setTimeout(() => {
    console.log('Timeout 2');
}, 500);

console.log('End');

输出结果为：

Start
End
Timeout 2
Timeout 1

虽然 Timeout 1 的延迟时间更长，但由于事件循环的工作机制，它在 Timeout 2 之后执行。

2. Promise 的执行顺序

Promise 是现代 JavaScript 异步编程的基础，其回调函数会在当前调用栈清空后立即执行，且优先于宏任务中的定时器。

console.log('Start');

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

Promise.resolve().then(() => {
    console.log('Promise 1');
}).then(() => {
    console.log('Promise 2');
});

console.log('End');