为何这段thenable代码能引用自身？解析p1=p.then(...)执行逻辑

核心原因是箭头函数的执行时机是异步的，且它对p1的引用是在执行时才求值，而非定义时。下面一步步拆解代码的执行逻辑：

代码执行步骤解析 #

1. 第一行代码的执行过程 #

let p1 = p.then(a => [p1])

• 首先创建箭头函数a => [p1]：这个函数仅被定义，不会立即执行，它内部的p1只是一个引用，此时并不会读取p1的具体值。
• 调用p.then()方法：将箭头函数作为onFulfilled回调传入，then方法会立即返回一个新的Promise实例。
• 完成p1的赋值：把then返回的新Promise实例赋值给p1。

这里要注意：let声明的变量虽有暂时性死区，但因为箭头函数此时并未执行，所以不会触发死区报错。

2. 后续代码的执行 #

let [p2] = await p1
console.log(p1===p2)

• await p1会暂停当前代码，等待原Promisep的状态变为resolved：只有当p成功resolve后，传给then的箭头函数才会被放入微任务队列，等当前同步代码执行完毕后再执行。
• 箭头函数执行：此时p1已经完成赋值（就是then返回的那个Promise实例），所以箭头函数里的p1能正确指向该实例，返回数组[p1]。
• 这个数组会成为p1的resolve值，await p1拿到数组后解构赋值给p2，因此p2就是p1本身，最终console.log输出true。

关键知识点总结 #

• Promise的then回调是异步执行的：不会在调用then时立即执行，仅在原Promise状态变更后，加入微任务队列等待执行。
• 函数内的变量引用是延迟求值的：箭头函数里的p1不是在定义时确定值，而是在函数执行时，从当前作用域中查找p1的当前值。
• 变量赋值的顺序：p1的赋值（指向then返回的Promise）是同步完成的，远早于箭头函数的执行时机，所以执行回调时p1已经存在。

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