美文网首页深究JavaScript
这一次,彻底弄懂 JavaScript 执行机制

这一次,彻底弄懂 JavaScript 执行机制

作者: 景元合 | 来源:发表于2020-03-06 16:14 被阅读0次

    前言

    今天看到一道题目,问的是宏任务与微任务,看的是一脸懵逼,于是特意研究了一下,在这里特别感谢https://juejin.im/post/59e85eebf265da430d571f89#heading-0这篇文章,帮我搞懂了js运行机制。

    背景

    console.log('----------------- start -----------------');
    setTimeout(() => {
      console.log('setTimeout');
    }, 0)
    new Promise((resolve, reject) =>{
      for (var i = 0; i < 5; i++) {
        console.log(i);
      }
      resolve();  // 修改promise实例对象的状态为成功的状态
    }).then(() => {
      console.log('promise实例成功回调执行');
    })
    console.log('----------------- end -----------------');
    

    在理解javascript运行机制前,看到这个题目是一脸蒙蔽,直到了解了宏任务与微任务运行机制,才彻底懂了。

    1.关于javascript

    首先大家都知道javascript是一门单线程语言,所谓的“多线程”也是用单线程模拟出来的。

    2.javascript事件循环

    大家都知道js分为单线程与多线程,这里引用大神一张图片:


    image.png

    文字描述:

    • 同步任务和异步任务分别进入不同的场所,同步任务进入主线程,异步任务进入Event Table,并注册函数。
    • 当指定的事情完成时,Event Table会将这个函数移入Event Queue。
    • 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
    • 上述过程会不断重复,也就是常说的Event Loop(事件循环)。
      举一个最简单的例子:
    setTimeout(()=>{console.log('异步')},0);console.log('同步')
    //同步
    //异步
    
    • 进入Event Table,并注册。
    • 等待0秒以后,Event Table会将这个函数移入Event Queue。
    • console.log('同步')
    • 主线程执行完毕后,从Event Queue执行console.log('异步')

    3.宏任务与微任务

    • macro-task(宏任务):包括整体代码script,setTimeout,setInterval
    • micro-task(微任务):Promise,process.nextTick
      还是借用大神的图:


      image.png
    • 先顺序执行同步事件即宏任务
    • 碰到异步事件将其分类丢入宏任务 Event Queue 和微任务 Event Queue 中
    • 等宏任务执行结束后顺序执行完微任务 Event Queue 中任务,第一次循环结束;
    • 顺序执行宏任务 Event Queue 中任务,如此往复
      最后拿一个例子来解释说明:
    setTimeout(function() {
        console.log('setTimeout');
    })
    new Promise(function(resolve) {
        console.log('promise');
    }).then(function() {
        console.log('then');
    })
    console.log('console');
    //promise
    //console
    //then
    //setTimeout
    

    最后

    在nodejs中,微任务也是有执行顺序的,不像浏览器是谁先添加就先执行谁;
    node中微任务process.nextTick优先于promise.then优先于await
    javascript是一门单线程语言
    Event Loop是javascript的执行机制

    相关文章

      网友评论

        本文标题:这一次,彻底弄懂 JavaScript 执行机制

        本文链接:https://www.haomeiwen.com/subject/cegirhtx.html