javascript - 执行上下文 : Why would this javascript code behave like this?

Question

我已经开始学习 javascript 中的异步编程。请看下面的代码:

const myPromise = () => Promise.resolve('I have resolved');

function firstFunction() {
  myPromise().then(res => console.log(res));
  console.log('firstFunction');
}

async function secondFunction() {
  console.log(await myPromise());
  console.log('secondFunction');
}

firstFunction()
secondFunction();

此代码将产生以下输出:

• 第一个函数
• 我已经解决了
• 我已经解决了
• 第二个函数

我对输出很满意，我想我明白为什么会这样:

• FirstFunction() 进入调用栈
• promise 将在事件循环中搁置
• console.log('firstFunction') 运行并打印 (firstFunction)
• 现在调用堆栈为空，因此打印已解决的 promise (我已解决)
• 接下来SecondFunction()进入调用栈
• 因为我们正在使用 Async await，代码将等待 myPromise()
• 然后会打印(我已经解决了)
• 最后它会打印 (secondFunction)

当我把上面的代码改成下面这样的时候:

const myPromise = () => Promise.resolve('I have resolved');

function sayHi() {
  console.log('hi');
}

function firstFunction() {
  myPromise().then(res => console.log(res));
  console.log('firstFunction');
}

async function secondFunction() {
  console.log(await myPromise());
  console.log('secondFunction');
}

firstFunction()
secondFunction();
sayHi();

我希望代码输出以下内容:

• 第一个函数
• 我已经解决了
• 我已经解决了
• 第二个函数
• 嗨

而是代码输出:

• 第一个函数
• 嗨
• 我已经解决了
• 我已经解决了
• 第二个函数

你能解释一下这段代码的行为吗？

Answer 1

为了让消息队列执行存储的消息(来自异步函数)，调用堆栈需要为空。

你可以看看这个 article关于说明此行为的事件循环。

在第二种情况下，调用堆栈有 3 个函数需要执行并从中删除，在消息队列中的消息被执行之前，所以 hi 必须在之前打印异步调用。

secondFunction 最后执行，因为它在一个异步函数中并且在它之前有一个等待。