JavaScript 如何在后台工作：了解其单线程性质和异步操作-js教程-PHP中文网

JavaScript 如何在后台工作：了解其单线程性质和异步操作

Patricia Arquette

发布： 2024-09-19 20:30:47

原创

804 人浏览过

How JavaScript Works in the Background: Understanding Its Single-Threaded Nature and Asynchronous Operations

JavaScript 是网络的支柱，为数十亿网站和应用程序提供动态客户端功能。但您有没有想过 JavaScript 是如何在后台发挥其魔力的？在这篇文章中，我们将深入研究 JavaScript 单线程本质的内部工作原理，并探索异步编程的概念。

单线程是什么意思？

当我们说 JavaScript 是“单线程”时，这意味着它有一个调用堆栈。调用堆栈本质上是 JavaScript 跟踪正在执行的函数的结构。它遵循后进先出 (LIFO) 顺序，这意味着最后推送到堆栈的函数将最先完成。以下是其工作原理的示例：

function first() {
    console.log('First function');
}

function second() {
    console.log('Second function');
}

first();
second();

登录后复制

在此示例中，first() 函数被添加到堆栈并执行。一旦完成，它就会被弹出，第二个()函数被压入堆栈并接下来执行。

虽然单线程语言可能看起来有限，因为它们一次只能做一件事，但 JavaScript 巧妙地使用异步机制使其能够模拟多任务处理。

事件循环和异步执行

JavaScript 使用异步执行来处理可能需要很长时间才能完成的操作，例如网络请求、文件 I/O 或计时器。尽管是单线程的，但由于事件循环和回调队列，它可以同时管理多个任务。

事件循环

事件循环是 JavaScript 并发模型的核心概念。它的主要职责是管理 JavaScript 如何处理异步代码执行。其工作原理如下：

同步代码首先运行。当 JavaScript 启动时，它使用调用堆栈以同步方式逐行执行全局范围内的所有代码。
异步任务被发送到 Web API（如 setTimeout、fetch 等）或 Node.js API，它们将在后台进行处理。
回调队列是异步操作完成后放置的地方。
事件循环不断检查调用堆栈是否为空。如果堆栈为空，它将从回调队列中取出第一项并将其推送到调用堆栈上，以允许其执行。

异步 JavaScript 的魔力在于事件循环、调用堆栈和回调队列之间的交互。异步操作不会阻塞调用堆栈，这意味着 JavaScript 可以在等待后台任务完成的同时继续执行其他代码。

示例：使用 setTimeout

考虑以下带有 setTimeout 函数的示例：

console.log('Start');

setTimeout(() => {
    console.log('This runs after 2 seconds');
}, 2000);

console.log('End');

登录后复制

以下是逐步发生的事情：

JavaScript 打印“开始”。
setTimeout 函数被调用，但不是阻塞执行 2 秒，而是发送到 Web API，在后台运行。
JavaScript 打印“End”，继续执行而不等待 setTimeout 完成。
2秒后，setTimeout内部的回调函数被放入回调队列中。
事件循环检查调用堆栈是否为空（确实如此），然后将回调函数推入堆栈并执行它，打印“This running after 2秒”。

Promise 和异步/等待

现代 JavaScript 中处理异步任务的另一种流行方法是通过 Promises 和 async/await 语法，这有助于通过避免深层嵌套的回调（也称为“回调地狱”）来提高代码的可读性。

Promise 表示异步操作的最终完成（或失败）及其结果值。这是一个例子：

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise resolved!');
    }, 1000);
});

promise.then(result => {
    console.log(result);  // Output after 1 second: 'Promise resolved!'
});

登录后复制

我们可以使用 then() 来处理 Promise 解决时发生的情况，而不是依赖回调。如果我们想以更同步的方式处理异步代码，我们可以使用 async/await:

async function asyncExample() {
    const result = await promise;
    console.log(result);  // Output after 1 second: 'Promise resolved!'
}

asyncExample();

登录后复制

这使得代码更干净、更容易理解，允许我们在移动到下一行代码之前“等待”异步任务完成，即使 JavaScript 在幕后仍然是非阻塞的。