插件窝 干货文章 JavaScript 如何在后台工作:了解其单线程性质和异步操作

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

异步 堆栈 javascript 回调 743    来源:    2024-10-20

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 或计时器。尽管是单线程的,但由于事件循环和回调队列,它可以同时管理多个任务。

立即学习“Java免费学习笔记(深入)”;

事件循环

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

  1. 同步代码首先运行。当 javascript 启动时,它使用调用堆栈以同步方式逐行执行全局范围内的所有代码。

  2. 异步任务被发送到 web api(如 settimeout、fetch 等)或 node.js api,它们将在后台进行处理。

  3. 回调队列是异步操作完成后放置的地方。

  4. 事件循环不断检查调用堆栈是否为空。如果堆栈为空,它将从回调队列中取出第一项并将其推送到调用堆栈上,以允许其执行。

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

示例:使用 settimeout

考虑以下带有 settimeout 函数的示例:

console.log('start');

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

console.log('end');

以下是逐步发生的事情:

  1. javascript 打印“开始”。

  2. settimeout 函数被调用,但不是阻塞执行 2 秒,而是发送到 web api,在后台运行。

  3. javascript 打印“end”,继续执行而不等待 settimeout 完成。

  4. 2秒后,settimeout内部的回调函数被放入回调队列中。

  5. 事件循环检查调用堆栈是否为空(确实如此),然后将回调函数推入堆栈并执行它,打印“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 在幕后仍然是非阻塞的。

javascript 异步模型中的关键组件

  1. 调用堆栈:执行同步代码的地方。

  2. web api/node.js api:处理异步任务(如网络请求)的外部环境。

  3. 回调队列:异步任务结果等待推送到调用栈执行的队列。

  4. 事件循环:协调调用堆栈和回调队列的系统,确保任务按正确的顺序处理。

结论

javascript 的单线程特性乍一看似乎有局限性,但其异步功能使其能够有效地管理多个任务。通过事件循环、回调队列和 promise 等机制,javascript 能够处理复杂的非阻塞操作,同时保持直观、同步的编码风格。