理解JS执行顺序

摘要:众所周知,JS的执行顺序是自上而下的。 严格意义上来说,javascript没有多线程的概念,所有的程序都是单线程依次执行的。 就是代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行。

众所周知,JS的执行顺序是自上而下的。 严格意义上来说,javascript没有多线程的概念,所有的程序都是单线程依次执行的。 就是代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行。


注意

js代码执行分为两个部分:  

1、代码的检查装载阶段(预编译阶段),此阶段进行变量和函数的声明,但是不对变量进行赋值, 变量的默认值为undefined。  

2、代码的执行阶段,此阶段对变量进行赋值和函数的声明。 所以:Js的变量提升和函数提升会影响JS的执行结果,ES6中的let定义的变量不会提升 

3、js的执行顺序,先同步后异步  

4、异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 

5、调用Promise 中的resolve,reject属于微任务队列,setTimeout属于宏任务队列 所以:【同步>异步;微任务>宏任务】  


示例

console.log('event start')
setTimeout(function () {
    console.log('setTimeout');
});

new Promise(function(resolve,reject){
    console.log('promise start')
    resolve()
}).then(function(){
    console.log('promise end')
})
console.log('event end')

执行结果为:

event start
promise start
event end
promise end
undefined
setTimeout

解释:

主线程执行按顺序代码 遇到 setTimeout, 回调进入到宏任务队列上 遇到 Promise, 立即执行, then 函数进入到微任务队列 同步代码执行结束, 主线程检查是否存在微任务, 发现 then, 执行 微任务执行完毕, 再去查找宏任务 setTimeout, 执行 setTimeout 执行结束, 检查是否存在微任务, 不存在, 结束. 


图例



本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_3233