带你简单理解JavaScript运行机制

带你简单理解JavaScript运行机制

　　一、同步与异步：

　　1.同步：按照顺序一步一步执行下来。例如

            console.log('1')
            console.log('2')
            console.log('3')            

　　　输出顺序就是123

 

 

 

　　2.异步：先执行一部分，等到结果（或者时间到）在执行后续。即同步执行完毕之后（全部执行完毕），在执行异步。

　　例如：1）计时器函数：setInterval与setTimeout   2)Ajax   3)读取文件。

　　举例：

            console.log('1')
            setTimeout(()=>{
                    console.log('2')
            },0)
            console.log('3')
            console.log('4')    

　　那么输出顺序就是1342

 

　　二、单线程：

　　1.定义：JS在一个时间段内只能执行一种工作。所以同步的函数是，按照顺序一条一条走下来。等同步完成之后在执行异步函数。

　　如果计时器函数倒计时结束，但是同步函数还没执行完毕，那么是执行同步函数还是执行异步

　　举例：现在将输出语句循环输出一万次，此时设定计时器时间10ms等到计时器时间结束了结果是什么？

　　　　　　　for(var i=0;i<10000;i++){
                console.log('1')
            }
            setTimeout(()=>{
                console.log('2')
            },10)
            setTimeout(()=>{
                console.log('3')
            },100)

　　

 

　　根据结果可以看出，只有等同步函数全部执行完毕之后才会执行异步函数。

 

 　　2.原理：

　　　　1）运行栈：只运行同步函数，一行一行按顺序执行。

　　　　2）任务队列：当异步函数（时间到）之后进入队列在一条一条执行。

　　　　3）事件循环：异步函数（计时器）没到时间之前，先在事件循环中循环，等到时间之后，在进入任务队列。

　　三、宏任务与微任务：

　　1.宏任务与微任务是将异步函数进行分化演变了两个步骤；先执行微任务，再执行宏任务。

　　2.宏任务：计时器、ajax、读取文件

　　3.微任务：promise.then方法。

　　3.特殊函数：

　　　　1）process.nextTick：同步之后，异步之前。

　　　　2）setImmediate:在计时器为0之后1之前

　　　　3）promise(()=>{  内为同步}).then(()=>{异步微任务})

　　4.那么真正的顺序是：同步》process.nextTick》微任务（promise.then）》宏任务（setImmediate）

 

 　　四、实战练习：

　　1.练习一：很简单没有任何难度：

 

　　答案：25687314

 

 　　2.在检测一下：

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function(resolve, reject) {
  console.log(2);
  resolve()
}).then(function() {
  console.log(3)
});
process.nextTick(function () {
  console.log(4)
})
console.log(5)，

　　答案：52431

　　五、总结：

　　为什么要学习低层的运行逻辑，我只要会用不就好了吗？但是一旦遇到bug 或者遇到逻辑问题，不至于慌张，至少知道大概哪里出现了问题。而且只有你了解了如何运行的，你才能走得更远。