JS:异步和事件循环练习题1(*****五颗星)
1.第1题:
<script> const promise = new Promise((resolve, reject) => { console.log(1); console.log(2); }); promise.then(() => { console.log(3); }); console.log(4); // 结果:1 2 4 </script>
promise.then 是微任务,它会在所有的宏任务执行完之后才会执行,同时需要promise内部的状态发生变化,因为这里内部没有发生变化,一直处于pending状态,所以不输出3。
2.第2题:
<script> const promise1 = new Promise((resolve, reject) => { console.log('promise1') resolve('resolve1') }) const promise2 = promise1.then(res => { console.log(res) }) console.log('1', promise1); console.log('2', promise2); </script>
结果:
then方法会返回一个新的Promise实例
then方法是Promise.prototype下面的方法,即Promise.prototype.then()
代码执行过程如下:
- script是一个宏任务,按照顺序执行这些代码;
- 首先进入Promise,执行该构造函数中的代码,打印promise1;
- 碰到resolve函数, 将promise1的状态改变为resolved, 并将结果保存下来;
- 碰到promise1.then这个微任务,将它放入微任务队列;
- promise2是一个新的状态为pending的Promise;
- 执行同步代码1, 同时打印出promise1的状态是resolved;
- 执行同步代码2,同时打印出promise2的状态是pending;
- script宏任务执行完毕,查找微任务队列,发现promise1.then这个微任务且状态为resolved,执行它。
3.第3题:
<script> const promise = new Promise((resolve, reject) => { console.log(1); setTimeout(() => { console.log("timerStart"); resolve("success"); console.log("timerEnd"); }, 0); console.log(2); }); promise.then((res) => { console.log(res); }); console.log(4); // 结果:1 2 4 timerStart timerEnd success </script>
代码执行过程:
- 首先遇到Promise构造函数,会先执行里面的内容,当作同步任务,打印1;
- 遇到定时器steTimeout,它是一个宏任务,放入宏任务队列;
- 继续向下执行,打印出2;
- 由于Promise的状态此时还是pending,所以promise.then先不执行;
- 继续执行下面的同步任务,打印出4;
- 此时微任务队列没有任务,继续执行下一轮宏任务,因为前一个宏任务是script,现在执行steTimeout;
- 首先执行timerStart,然后遇到了resolve,将promise的状态改为resolved且保存结果并将之前的promise.then推入微任务队列,再执行timerEnd;
- 执行完这个宏任务,就去执行微任务promise.then,打印出resolve的结果。
4.第4题:
<script> Promise.resolve().then(() => { console.log('promise1'); const timer2 = setTimeout(() => { console.log('timer2') }, 0) }); const timer1 = setTimeout(() => { console.log('timer1') Promise.resolve().then(() => { console.log('promise2') })
剩余60%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理