JavaScript 执行机制

 

 

彻底弄懂 JavaScript 执行机制

Eventloop不可怕，可怕的是遇上Promise

JavaScript异步、事件循环与消息队列、微任务与宏任务

new Promise((resolve,reject)=>{
    console.log("promise1",1) 
    resolve()
}).then(()=>{
    console.log("then11",2)
    new Promise((resolve,reject)=>{
        console.log("promise2",3)
        resolve();
    }).then(()=>{
        console.log("then21",4)
        new Promise((resolve,reject)=>{
            console.log("promise3",5)
            resolve();
        }).then(()=>{
            console.log("then31",7)
        }).then(()=>{
                console.log("then32",9)
        })
    }).then(()=>{
        console.log("then22",8)
    })
}).then(()=>{
    console.log("then12",6)
})  

 

setTimeout(function(){
        console.log(1)
        },0)

   new Promise(function(resolve,reject){
         console.log(2)
         resolve()
   }).then(function(){
         console.log(3)
   }).then(function(){
         console.log(4)
   })
   
   console.log(5)

 

 

本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。

不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：

• javascript是按照语句出现的顺序执行的

看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的：

然而实际上js是这样的：

依照js是按照语句出现的顺序执行这个理念，我自信的写下输出结果：

去chrome上验证下，结果完全不对，瞬间懵了，说好的一行一行执行的呢？

去验证一下，结果正确！
然后我们修改一下前面的代码：

代码1的输出结果是：

代码2的输出结果是：

事件循环，宏任务，微任务的关系如图所示：

我们来分析一段较复杂的代码，看看你是否真的掌握了js的执行机制：

 

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

 

觉得是循环先执行宏任务，发现微任务丢进队列中，执行完宏任务再从队列中拿出微任务循环，依次循环直至结束 

6.写在最后

(1)js的异步

我们从最开头就说javascript是一门单线程语言，不管是什么新框架新语法糖实现的所谓异步，其实都是用同步的方法去模拟的，牢牢把握住单线程这点非常重要。

(2)事件循环Event Loop

事件循环是js实现异步的一种方法，也是js的执行机制。

(3)javascript的执行和运行

执行和运行有很大的区别，javascript在不同的环境下，比如node，浏览器，Ringo等等，执行方式是不同的。而运行大多指javascript解析引擎，是统一的。

(4)setImmediate

微任务和宏任务还有很多种类，比如setImmediate等等，执行都是有共同点的，有兴趣的同学可以自行了解。

(5)最后的最后

• javascript是一门单线程语言
• Event Loop是javascript的执行机制

牢牢把握两个基本点，以认真学习javascript为中心，早日实现成为前端高手的伟大梦想！