Appearance
字节跳动面试题
js
new Promise(resolve => {
let p1 = Promise.resolve()
resolve(p1)
}).then(() => {
console.log('0')
})
Promise.resolve()
.then(() => { console.log('1') })
.then(() => { console.log('2') })
.then(() => { console.log('3') })
细节解释
第一阶段
同步执行
- 第一步先找到同步任务执行它
new Promise(resolve => { let p1 = Promise.resolve() resolve(p1) })
Promise.resolve()
- 判断执行的内容是宏任务还是微任务,放到对应的队列里面,这里都是同步任务和微任务 这里是 先 new Promise 然后 Promise.resolve()所以这里要比较的是 new Promise 的里面的p1 和 Promise.resolve().then 哪个先执行,p1 内容未决议完成
我们先翻译一道
resolve(p1)
resolve(new Promise(resolve=>resolve())) 等于()=>new Promise(resolve=>resolve())
翻译then
.then(() => { console.log('1') }) 等于 ()=>console.log('1')
那么 p1 执行结果为new Promise(resolve=>resolve()) , 和console.log('1')
控制台打印为:
js
new Promise(resolve=>resolve()) //因为这里没有console所以看不到,其实他优先执行了
1 //然后就是 console.log('1')
接下来到第二阶段
.then(() => { console.log('0') }) 和 .then(() => { console.log('2') }) 比较 但 因为 resolve=>resolve() 所以翻译为
()=>()=>console.log('0') ()=>console.log('2')
控制台打印为:
js
()=>console.log('0')
2 //然后就是 console.log('2')
第三阶段 才真正的执行
()=>console.log('0') 和 .then(() => { console.log('3') })
翻译后
()=>console.log('0')
()=>console.log('3')
控制台打印为:
js
0
3
一个promise //Promise.resolve() 会直接返回这个promise实例 所以控制台还会继续执行
精简版解释
前置第一步先翻译代码
js
new Promise(resolve =>{ resolve(new Promise(resolve=>resolve())) }).then(() => {
console.log('0')
})
new Promise(resolve=>{ resolve() }).then(() => { console.log('1') }).then(() => { console.log('2') }).then(() => { console.log('3') })
前置第二步翻译
第1阶段(去掉开头重复的结果为)
js
resolve(new Promise(resolve=>resolve()))
.then(() => { console.log('0') })
resolve()
.then(() => { console.log('1') })
.then(() => { console.log('2') })
.then(() => { console.log('3') })
翻译resolve
js
()=>new Promise(resolve=>resolve())
()=>undefined
// 执行
new Promise(resolve=>resolve())
.then(() => { console.log('1') })
第1阶段
js
resolve=>resolve()
.then(() => { console.log('2') })
第3阶段
js
.then(() => { console.log('0') })
.then(() => { console.log('3') })