JavaScript的执行顺序

前言

在说 JavaScript 的执行顺序之前，我们先回答一下以下几组程序的输出结果

第 1 组

const output = (v) => {console.log(v);
};setTimeout(() => {console.log(1);
}, 0);
output(2);
console.log(3);// 2 3 1

第 2 组

new Promise((resolve) => {console.log(1);resolve();new Promise((resolve) => {console.log(2);resolve();}).then(() => {console.log(3);new Promise((resolve) => {console.log(4);resolve();}).then(() => {console.log(5);new Promise((resolve) => {console.log(6);resolve();}).then(() => {console.log(7);});});});
}).then(() => {console.log(8);new Promise((resolve) => {console.log(9);resolve();}).then(() => {console.log(10);});
});// 1 2 3 4 8 9 5 6 10 7

看完上面两组案例，是不是会产生这样的疑惑，为什么输出的结果是这样的，别着急，下面我们来详细分析

一、简述

我们都知道 JavaScript 是单线程语言，这表明 JavaScript 同时只能执行一个任务，但执行顺序却并不是自上而下的

这一点，通过上面的案例我们就已经知道了，那么执行规律究竟是什么呢？

要分析 JavaScript 的执行规律，就不得不说一下 JavaScript 的任务分类， JavaScript 分为同步任务和异步任务

二、同步任务

同步任务：立即执行的任务，解析时遇到同步任务会被主线程立即读取并执行

同步任务：

1. console.log()
2. new Promise()
3. 直接调用 function()
4. …

三、异步任务

异步任务：异步执行的任务，解析时遇到异步任务，直接丢到任务队列中，不会立即读取和执行

异步任务又分为宏任务和微任务，执行时优先执行微任务，后执行宏任务

微任务

1. promise.then()
2. nextTick()
3. …

宏任务

1. setTimeout()
2. setInterval()
3. …

四、分析

JavaScript 在执行任务之前会先自上而下遍历所有任务，在遍历的过程中如果遇到同步任务则直接执行，执行完成后继续往下遍历，如果遇到异步任务，则放入任务队列中（微任务放入微任务队列，宏任务放入宏任务队列），第一遍遍历完成后，从微任务队列中继续遍历，遇到同步任务立即执行，遇到异步任务继续放入任务队列中，不断的重复这个过程，直到所有任务全部执行完毕，这个不断重复遍历执行的过程，就叫做事件循环

• 第 1 次循环：遍历所有任务，遇到同步任务立即解析并执行，遇到异步任务则放入任务队列中暂不解析
• 第 2 次循环：从任务队列中微任务开始循环，重复第 1 次的过程
• 第 n 次循环：所有同步任务、微任务都执行完毕后，开始循环宏任务，同样重复第 1 次的过程

第 1 组程序 - 解析

const output = (v) => {console.log(v);
};// 异步宏任务，放入任务队列，暂不执行
setTimeout(() => {console.log(1);
}, 0);// 同步任务，立即执行
output(2);// 同步任务，立即执行
console.log(3);

第 2 组程序 - 解析

new Promise((resolve) => {console.log(1);resolve();new Promise((resolve) => {console.log(2);resolve();}).then(() => {console.log(3);new Promise((resolve) => {console.log(4);resolve();}).then(() => {console.log(5);new Promise((resolve) => {console.log(6);resolve();}).then(() => {console.log(7);});});});
}).then(() => {console.log(8);new Promise((resolve) => {console.log(9);resolve();}).then(() => {console.log(10);});
});

这个稍微复杂一点，但也很好分析，我们来模拟一下事件循环

第 1 次循环

// 同步任务，立即执行
console.log(1)

// 同步任务，立即执行new Promise((resolve) => {console.log(2);resolve();})

// 异步任务，放入任务队列
.then(() => {console.log(3);new Promise((resolve) => {console.log(4);resolve();}).then(() => {console.log(5);new Promise((resolve) => {console.log(6);resolve();}).then(() => {console.log(7);});});});

// 异步任务，放入任务队列
.then(() => {console.log(8);new Promise((resolve) => {console.log(9);resolve();}).then(() => {console.log(10);});
});

第一次循环输出结果如下

// 1 2

第 2 次循环

// 同步任务，立即执行
console.log(3);

// 同步任务，立即执行
new Promise((resolve) => {console.log(4);resolve();
}

// 异步任务，放入任务队列
.then(() => {console.log(5);new Promise((resolve) => {console.log(6);resolve();}).then(() => {console.log(7);});});

// 同步任务，立即执行
console.log(8);

// 同步任务，立即执行
new Promise((resolve) => {console.log(9);resolve();
})

// 异步任务，放入任务队列
.then(() => {console.log(10);});

第 2 次循环输出结果如下

// 3 4 8 9

第 3 次循环

// 同步任务，立即执行
console.log(5);

// 同步任务，立即执行
console.log(6);

// 异步任务，放入任务队列
.then(() => {console.log(7);});

// 同步任务，立即执行
console.log(10);

第 3 次循环输出结果如下

// 5 6 10

第 4 次循环

// 同步任务，立即执行
console.log(7);

第 4 次循环输出结果如下

// 7

所有任务全部执行完毕，循环结束，最终输出结果如下

// 1 2 3 4 8 9 5 6 10 7