美文网首页
javascript执行机制

javascript执行机制

作者: 程序猿的小生活 | 来源:发表于2023-08-15 16:16 被阅读0次
    <script  setup>
    
    /**
     * 说明:
     * 宏任务(script,setTimeout(回调函数function),setInterval(回调函数function),UI渲染,I/O,postMessage等)
     * 微任务(promise(回调函数 then catch),process.nextTick)
     * 宏任务回调队列
     * 微任务回调队列
     * javascript执行机制顺序
     * 1. 先执行宏任务(script,setTimeout,setInterval,UI渲染,I/O,postMessage等)
     *2.遇到setTimeout  setInterval此时将其回调函数注册后发布到宏任务事件队列中,
     *4.遇到promise立即执行,将其then catch回调发到微任务队列中
     *5.继续执行宏任务,宏任务执行结束后去微任务回调队列拿结果到主线程
     * 微任务回调队列全部执行完成再去宏任务回调队列拿结果
     */
    class  stu{
    
      constructor(te,callback) {
        console.log("构造")
        this.te = te;
        this.callback=callback;
      }
    
      age(c){
        this.callback("我是类回调","张三")
        console.log("我今年"+this.te+"岁")
      }
    }
    
    let as=(x,y)=>{
    console.log(x+y)
    }
    let yibu = (x)=>{
    
     x("1111","回调")
    }
    let  stu1 = new stu("10",as);
    stu1.age(11)
    console.log("我是宏任务console.log 第一个执行")//我先执行我先输出
    //yibu(as);
    let test=(resolve, reject)=>{
      console.log("我是Promise主程序,第二个执行")
             resolve("1111")
    }
    setTimeout(function (){
    console.log("我是timout回调,我第五个执行")
    },1000);
    let pro = new Promise(test);
    pro.then(result=>{
    console.log("我是微任务promise的回调then,我第四个执行")
    }).catch(result=>{
      console.log("我是微任务promise的回调catch,我第四个执行")
    })
    
    console.log("我是宏任务回调,我第三个执行")
    
    
    
    </script>
    

    相关文章

      网友评论

          本文标题:javascript执行机制

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