其中,关于时间差结果可能因为计算机性能造成的微小差异,可忽略不计
你答对了吗?下面我们由浅入深探索本题
======================================================================================
首先,看一下 event loop 的基础必备内容
event loop 执行顺序:
首先执行 script 宏任务 执行同步任务,遇见微任务进入微任务队列,遇见宏任务进入宏任务队列
执行完当前宏任务所产生的微任务队列,有则依次执行,直到全部执行完,
执行浏览器 UI 线程的渲染工作 检查是否有WebWorker任务,有则执行
执行下一个宏任务,回到第二步,依此循环,直到宏任务和微任务队列都为空
微任务包括:MutationObserver、Promise.then()或catch()、Promise为基础开发的其它技术,比如fetch API、V8的垃圾回收过程、Node独有的process.nextTick 、 Object.observe(已废弃;Proxy 对象替代)
宏任务包括:script 、setTimeout、setInterval 、setImmediate 、I/O 、UI rendering 、 postMessage 、 MessageChannel
注意: 下面的题目都是执行在浏览器环境下
遇到不好理解的,可结合 【我文章里面的 promise原理实现】 进行理解,就很简单了
=====================================================================
题目一:
var promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
})
promise.then(()=>{
console.log(3)
})
console.log(4)
// 1
// 2
// 4
// 3
首先明确, Promise 构造函数是同步执行的, then 方法是异步执行的
开始 new Promise ,执行构造函数同步代码,输出 1
再 resolve(), 将 promise 的状态改为了 resolved ,并且将 resolve 值保存下来,此处没有传值
执行构造函数同步代码,输出 2
跳出promise,往下执行,碰到 promise.then 这个微任务,将其加入微任务队列
执行同步代码,输出 4
此时宏任务执行完毕,开始检查微任务队列,执行 promise.then 微任务,输出 3
题目二:
var promise = new Promise((resolve, reject) => {
console.log(1)
})
promise.then(()=>{
console.log(2)
})
console.log(3)
// 1
// 3
开始 new Promise ,执行构造函数同步代码,输出 1
再 promise.then ,因为 promise中并没有resolve ,所以 then 方法不会执行
执行同步代码,输出 3
题目三:
var promise = new Promise((resolve, reject) => {
console.log(1)
})
promise.then(console.log(2))
console.log(3)
// 1
// 2
// 3
首先明确, .then 或者 .catch 的参数期望是函数,传入非函数则会发生( value => value )
开始 new Promise ,执行构造函数同步代码,输出 1
然后 then() 的参数是一个 console.log(2) (注意:并不是一个函数),是立即执行的,输出 2
执行同步代码,输出 3
题目四:
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
// 1
then(2) 、 then(Promise.resolve(3)) 发生了值穿透,直接执行最后一个 then ,输出 1
题目五:
var promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
reject()
})
promise.then(()=>{
console.log(2)
}).catch(()=>{
console.log(3)
})
console.log(4)
// 1
// 4
// 2
开始 new Promise ,执行构造函数同步代码,输出 1
再 resolve(), 将 promise 的状态改为了 resolved ,并且将 resolve 值保存下来,此处没有传值
再 reject() ,此时 promise 的状态已经改为了 resolved ,不能再重新翻转(状态转变只能是pending —> resolved 或者 pending —> rejected,状态转变不可逆)
跳出promise,往下执行,碰到 promise.then 这个微任务,将其加入微任务队列
往下执行,碰到 promise.catch 这个微任务,此时 promise 的状态为 resolved (非 rejected ),忽略 catch 方法
执行同步代码,输出 4
此时宏任务执行完毕,开始检查微任务队列,执行 promise.then 微任务,输出 2
题目六:
Promise.resolve(1)
.then(res => {
console.log(res);
return 2;
})
.catch(err => {
return 3;
})
.then(res => {
console.log(res);
});
// 1
// 2
首先 resolve(1), 状态改为了 resolved ,并且将 resolve 值保存下来
执行 console.log(res) 输出 1
返回 return 2 实际上是包装成了 resolve(2)
状态为 resolved , catch 方法被忽略
最后 then ,输出 2
题目一:
setTimeout(() => {
console.log(1)
})
Promise.resolve().then(() => {
console.log(2)
})
console.log(3)
// 3
// 2
// 1
首先 setTimout 被放入宏任务队列
再 Promise.resolve().then , then 方法被放入微任务队列
执行同步代码,输出 3
此时宏任务执行完毕,开始检查微任务队列,执行 then 微任务,输出 2
微任务队列执行完毕,检查执行一个宏任务
发现 setTimeout 宏任务,执行输出 1
题目二:
var promise = new Promise((resolve, reject) => {
console.log(1)
setTimeout(() => {
console.log(2)
resolve()
}, 1000)
})
promise.then(() => {
console.log(3)
})
promise.then(() => {
console.log(4)
})
console.log(5)
// 1
// 5
// 2
// 3
// 4
其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。