JavaScript中await执行顺序及变量输出undefined原因咨询

你测试所用的代码如下：

async function foo() {
    console.log('FIrst');
    let a = await new Promise((resolve,reject)=>{
        console.log("inside Promise");
        resolve();
    })
    console.log(a);
    console.log('Second');
} 
foo();
console.log('Three');

为什么a输出undefined #

await关键字的作用是等待后面的Promise进入落定状态，再把该Promise resolve的返回值赋值给左侧变量。你在代码里调用resolve()时没有传入任何参数，JS中函数调用未传参时，对应接收的值就是undefined，因此a最终被赋值为undefined，和对象引用丢失没有关系。如果把代码改成resolve('任意值')，a就会打印出你传入的内容。

完整执行顺序 #

要理解输出顺序，只需要记住两个核心规则：1. Promise构造函数传入的executor回调是同步执行的；2. await会暂停当前async函数的执行，把await后续的代码推入微任务队列，等当前所有同步代码执行完毕、调用栈清空后，才会按顺序执行微任务队列里的内容。
逐行执行的流程对应输出结果如下：

• 全局代码启动，调用foo()进入async函数执行上下文
  • 执行同步代码console.log('FIrst')，输出第一行：FIrst
  • 执行到await后的Promise构造逻辑，同步运行传入的executor回调：执行console.log("inside Promise")，输出第二行：inside Promise
  • 执行resolve()将该Promise标记为fulfilled状态，因为遇到await，foo函数暂停，await之后的所有逻辑（给a赋值、打印a、打印Second）被推入微任务队列，控制权交回全局上下文
• 全局上下文继续执行foo()调用后的同步代码console.log('Three')，输出第三行：Three
• 此时所有同步代码执行完毕，调用栈为空，事件循环开始处理微任务队列，取出之前暂存的foo函数剩余逻辑执行：
  • 将Promise resolve的值（即无参resolve返回的undefined）赋值给变量a
  • 执行console.log(a)，输出第四行：undefined
  • 执行console.log('Second')，输出第五行：Second
• 微任务队列清空，本轮事件循环结束

内容的提问来源于stack exchange，提问作者Tinfinity