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

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

1. 事件循环机制问题
2. 原型链问题
3. 变量提升问题
4. 箭头函数问题
5. 闭包打印
   …

一、事件循环机制问题

要了解事件循环机制，首先要知道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'