js的一些基本知识点
Posted 赏花赏景赏时光
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js的一些基本知识点相关的知识，希望对你有一定的参考价值。
1、js中的执行机制、event-loop
众所周知，js是一门单线程语言，而js中将任务分为同步和异步任务、异步任务；而异步任务又分为宏任务(setTimeout. setInterval等)和异步任务(promise.then process.nextick等)，而微任务优先级大于宏任务
同步任务会进入主线程、异步任务会根据任务类型分别进入宏任务、微任务队列中。
1、当执行主线程的时候，遇到宏任务则将宏任务放进宏任务队列中，遇到微任务则将微任务放进微任务队列中
2、当主线程执行完之后，会去遍历微任务队列，这时候会先将队列的第一个微任务取出，作为主线程执行，如遇到宏任务则将宏任务放进宏任务队列中，遇到微任务则将微任务放进微任务队列中；直到该线程跑完，会遍历微任务队列的下一个事件，执行同上面的操作
3、当微任务队列遍历完之后，会去遍历宏任务队列，这时候会将第一个宏任务事件取出，作为主线程，如遇到宏任务则将宏任务放进宏任务队列中，遇到微任务则将微任务放进微任务队列中；当该主线程执行完，会执行2、3步骤；
4、当执行完3步骤之后，会取出宏任务的下一个事件，重复3步骤，直到，宏任务事件队列遍历完
即：执行主线程，遇到宏任务，将其放进宏任务队列中；遇到微任务，将其放进微任务队列中；
当主线程执行完，会先去遍历微任务，每一个微任务都会执行：遇到宏任务，将其放进宏任务队列中、遇到微任务，将其放进微任务队列中。直到微任务队列遍历完
这时候会去遍历宏任务队列，同样每一个宏任务都会执行遇到宏任务，将其放进宏任务队列中、遇到微任务，将其放进微任务队列中；当前主线程跑完，会先去执行遍历微任务队列，若其为空，则遍历宏任务队列下一个事件，直到宏任务队列遍历完
看个例子：
<html>
<body>
<script>
console.log('1');
setTimeout(function() {
console.log('2');
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
setTimeout(function() {
new Promise(resolve => {
console.log(5)
resolve()
}).then(() => {
console.log(6)
setTimeout(function() {
console.log(7)
})
})
})
console.log('8')
})
})
new Promise(function(resolve) {
console.log('9');
resolve();
}).then(function() {
console.log('10')
setTimeout(function() {
console.log(11)
new Promise(resolve => {
console.log(12)
resolve()
}).then(() => {
console.log(13)
})
})
})
setTimeout(function() {
console.log('14');
new Promise(function(resolve) {
console.log('15');
resolve();
}).then(function() {
console.log('16')
new Promise(resolve => {
console.log(17)
})
setTimeout(function() {
console.log(18)
})
})
})
</script>
</body>
</html>输出结果：
test.html:4 1
test.html:27 9
test.html:30 10
test.html:7 2
test.html:9 4
test.html:23 8
test.html:43 14
test.html:45 15
test.html:48 16
test.html:50 17
test.html:32 11
test.html:34 12
test.html:37 13
test.html:14 5
test.html:17 6
test.html:53 18
test.html:19 7
参看文章：
javascript开发者应懂的33个概念：https://github.com/stephentian/33-js-concepts/blob/master/README.md
以上是关于js的一些基本知识点的主要内容，如果未能解决你的问题，请参考以下文章