代码模拟 Promise 原理,请问代码中的 this.__queue 是如何作为队列工作的?

小弟自学编程,尚未工作,若能解我疑问,愿打赏 10 元,聊表心意。

问题概况,

_this.__queue.forEach(json=>{
        json.fn1(...arg);

这一句里面的 json 哪里来的?this.__queue.push({fn1, fn2}) 不是个对象吗?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    class Promise2{
      constructor(fn){
        const _this=this;
        //重点
        this.__queue=[];

        this.__succ_res=null;
        this.__erro_res=null;

        this.status='';

        fn(function (...arg){
          _this.__succ_res=arg;

          _this.status='succ';

          _this.__queue.forEach(json=>{
            json.fn1(...arg);
          });
        }, function (...arg){
          _this.__erro_res=arg;

          _this.status='error';

          _this.__queue.forEach(json=>{
            json.fn2(...arg);
          });
        });
      }

      then(fn1, fn2){
        if(this.status=='succ'){
          fn1(...this.__succ_res);
        }else if(this.status=='error'){
          fn2(...this.__erro_res);
        }else{
          this.__queue.push({fn1, fn2});
        }
      }
    }

    Promise2.all=function (arr){
      let arr=[];

      return Promise2(function (resolve, reject){
        let i=0;

        function next(){
          arr[i].then(function (res){
            arr.push(res);

            i++;
            if(i==arr.length){
              resolve(arr);
            }else{
              next();
            }
          }, reject);
        }
      });
    };

    let p=new Promise2(function (resolve, reject){
      setTimeout(function (){
        resolve(12);
      }, 500);
    });

    p.then(function (num){
      alert(num);
    }, function (){
      alert('错误');
    });
    </script>
  </head>
  <body>

  </body>
</html>
阅读 595
评论
    4 个回答
    linong
    • 14.5k

    第一个,MDN

    this.__queue=[];
    //this.__queue这不就是个数组么?
    //Array.prototype.forEach()这个是遍历,自带的
    

    语法

    array.forEach(callback(currentValue, index, array){
       do something
    }, this)
    array.forEach(callback[, thisArg])

    参数

    callback
        为数组中每个元素执行的函数,该函数接收三个参数:
    currentValue(当前值)
        数组中正在处理的当前元素。
    index(索引)
        数组中正在处理的当前元素的索引。
    array
        forEach()方法正在操作的数组。
    thisArg可选
        可选参数。当执行回调 函数时用作this的值(参考对象)。
        返回值

    第二个,阮一峰 es6

    this.__queue.push({fn1, fn2});
    //push就不用给你介绍了吧。{fn1:fn1,fn2:fn2}只是简写。
    

    第三个,同问题二,里面的...arg也是es6

    _this.__queue.forEach(json=>{
    _this.__queue.forEach(function(json){
    
    
    评论 赞赏