JavaScript中常见的看代码写结果例题（一）

最新推荐文章于 2021-12-21 17:09:12 发布

安萌萌萌萌萌

最新推荐文章于 2021-12-21 17:09:12 发布

阅读量958

点赞数 3

分类专栏：前端手撕代码看代码写结果文章标签： js javascript 事件处理机制前端 es6

本文链接：https://blog.youkuaiyun.com/weixin_43981560/article/details/119417118

版权

本文介绍了JavaScript中的事件循环机制，包括宏任务与微任务的执行顺序，并通过例题深入讲解。同时，文章还探讨了原型和原型链问题，解析了如何查找对象的方法并分析了不同情况下的输出结果。通过实例，帮助读者理解async函数的工作原理以及原型链的查找路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同学们都知道，在前端面试中不管你的技术栈是vue还是react，各大公司对于JavaScript语言还是有一定要求的，此外在面试手撕代码环节，通常会考你一些JS基础或源码，尤其是看代码写结果最容易踩坑，通常出题的范围离不开以下几个方面：

事件循环机制问题

原型链问题

变量提升问题

箭头函数问题

闭包打印
…

一、事件循环机制问题

要了解事件循环机制，首先要知道Javascript是一门单线程语言，以及语句的执行顺序，还有什么是同步任务、什么是异步任务。这些内容在上一篇博客JavaScript中的事件循环机制中已经详细介绍了，这里直接总结上案例。

1、宏任务一般包括：整体代码script，setTimeout，setInterval、I/O、UI render等
2、微任务一般包括：Promise、Object.observe、MutationObserver等

事件执行顺序

1、先按同步代码顺序运行
2、开始清空微任务队列
3、开始清空宏任务队列（执行一个宏任务，把相关微任务添加入微任务队列）
4、开始清空微任务队列（上一个执行宏任务中加入队列的微任务一次性全部执行完成）
5、开始清空宏任务队列（执行下一个宏任务，把相关微任务添加入微任务队列）
…循环一直到执行完成

1.1 例题

1. console.log('sync statement 1');
2. Promise.resolve().then(function() {
   
3. console.log('micro task 1');
4. setTimeout(function() {
   
5. console.log('macro task 1');
6. }, 0);
7. }).then(function() {
   
8. console.log('micro task 2');
9. });
10. setTimeout(function() {
   
11. console.log('macro task 2'