摘要：先直接上源碼吧。阮一峰在基礎(chǔ)篇提到過，阮一峰基礎(chǔ)介紹，返回的是一個(gè)新的實(shí)例，不是原來(lái)的那個(gè)實(shí)例。同理綁定和的指向。秒后，是為了讓在隊(duì)列的最后執(zhí)行。此時(shí)將中第一個(gè)回調(diào)函數(shù)執(zhí)行的賦值給了。這就驗(yàn)證了阮一峰在基礎(chǔ)介紹將的下面的代碼邏輯。

先直接上源碼吧。

if(!window.Promise) {
    function Promise(fn) {
        var self=this;
        this.status = "pending";
        this.thenCache = [];
        this.count = 0
        if(!(this instanceof Promise)) {
            throw "Defer is a constructor and should be called width "new" keyword";
        }
        if(typeof fn !== "function") {
            throw "Defer params must be a function";
        }
        //為了讓傳進(jìn)來(lái)的函數(shù)在then后執(zhí)行
        setTimeout(function() {
            try {
                fn.call(this, self.resolve.bind(self), self.reject.bind(self))
            } catch(e) {
                self.reject(e);
            }
        }, 0);
    }
    Promise.prototype.resolve = function(value) {
        this.value = value;
        this.status = "resolved";
        this.triggerThen();
    }
    Promise.prototype.reject = function(reason) {
        this.value = reason;
        this.status = "rejected";
        this.triggerThen();
    }
    Promise.prototype.then = function(onResolve, onReject) {
        this.thenCache.push({ onResolve: onResolve, onReject: onReject });
        console.log("this", this)
        return this;
    }
    Promise.prototype.catch = function(fn) {
        if(typeof fn === "function") {
            this.errorHandle = fn;
        }
    };
    Promise.prototype.triggerThen = function() {
        console.log("this.thenCache", this.thenCache)
        console.log("this.status", this.status)
        var current = this.thenCache.shift(),
            res;
        console.log("current", current)
        if(!current && this.status === "resolved") {
            // console.log("--11--", + new Date())
            return this;
        } else if(!current && this.status === "rejected") {
            if(this.errorHandle) {
                this.value = this.errorHandle.call(undefined, this.value);
                this.status = "resolved";
                console.log("--11--", + new Date())
            }
            return this;
        };
        if(this.status === "resolved") {
            // console.log("--222--", + new Date())
            res = current.onResolve;
        } else if(this.status === "rejected") {
            console.log("--222--", + new Date())
            res = current.onReject;
        }
        this.count ++;
        if(typeof res === "function") {
            try {
                this.value = res.call(undefined, this.value);
                this.status = "resolved";
                console.log("-ffffd--", + new Date())
                this.triggerThen();
                // console.log("this.count", this.count, + new Date())
            } catch(e) {
                this.status = "rejected";
                this.value = e;
                return this.triggerThen();
            }
        } else {
            console.log("--44--")
            this.triggerThen();
        }
    }
    window.Promise = Promise;
}

之前寫過如何構(gòu)造一個(gè)promise庫(kù)，參考的美團(tuán)點(diǎn)評(píng)的網(wǎng)站，寫到后面發(fā)現(xiàn)Promise.resolve()直接調(diào)用就會(huì)出現(xiàn)問題。報(bào)錯(cuò)上面的庫(kù)，也是引用Talking Coder的一篇博客，逐漸開始理解promise內(nèi)部是如何實(shí)現(xiàn)的了，當(dāng)然還是有一些疑問。比如上面的庫(kù)，需要注釋window.Promise = Promise和if(!window.Promise) {} 內(nèi)部的代碼在debug的時(shí)候才能看得見。但如果注釋掉，直接Promise.resolve()又回同樣報(bào)resolve不是一個(gè)方法。

阮一峰在promise基礎(chǔ)篇提到過，阮一峰promise基礎(chǔ)介紹，then返回的是一個(gè)新的Promise實(shí)例，不是原來(lái)的那個(gè)實(shí)例。這里提到的原來(lái)的那個(gè)實(shí)例，我想應(yīng)該是第一次實(shí)例化的Promise實(shí)例對(duì)象。這里有點(diǎn)不懂，為何then函數(shù)在return this后，就會(huì)返回一個(gè)新的Promise實(shí)例對(duì)象。

大概講解下此Promise庫(kù)的原理吧。

setTimeout(function() {
            try {
                fn.call(this, self.resolve.bind(self), self.reject.bind(self))
            } catch(e) {
                self.reject(e);
            }
}, 0);

call 和 bind 都是為了綁定this的指向，因?yàn)橹苯踊卣{(diào)，this在瀏覽器里面指向的是window對(duì)象，綁定fn執(zhí)行的時(shí)候this指向Promise的實(shí)例對(duì)象。同理綁定resolve和reject的this指向。
setTimout 0秒后，是為了讓fn在隊(duì)列的最后執(zhí)行。這里的隊(duì)列一會(huì)再剖析?；蛘哒f讓resolve或reject在隊(duì)列的最后執(zhí)行。
如果去掉setTimeout 0秒后，那么在實(shí)例化Promise的時(shí)候，就會(huì)立刻執(zhí)行回調(diào)fn，進(jìn)而執(zhí)行resolve或reject函數(shù)，而此時(shí)then還未來(lái)得及push需要thenAble的回調(diào)隊(duì)列，導(dǎo)致再執(zhí)行resolve或reject里面的triggerThen()方法時(shí)，無(wú)法執(zhí)行（此時(shí)回調(diào)隊(duì)列為空。）

Promise.prototype.then = function(onResolve, onReject) {
    this.thenCache.push({ onResolve: onResolve, onReject: onReject });
    return this;
}

then 實(shí)際是一個(gè)回調(diào)隊(duì)列，當(dāng)有3個(gè)then，那么回調(diào)隊(duì)列就會(huì)有三個(gè)。然后通this.triggerThen()
以此遞歸調(diào)用，直接回調(diào)隊(duì)列被調(diào)用完畢后，再執(zhí)行fn中的resolve或reject函數(shù)。

再分析下狀態(tài)和返回值
在triggerThen函數(shù)里有這么幾行代碼

if(typeof res === "function") {
        try {
                this.value = res.call(undefined, this.value);
                this.status = "resolved";
                this.triggerThen();
        } catch(e) {
                this.status = "rejected";
                this.value = e;
                return this.triggerThen();
        }
        } else {
            this.triggerThen();
        }

可以看出，當(dāng)js無(wú)語(yǔ)法報(bào)錯(cuò)的時(shí)候，執(zhí)行的try代碼。此時(shí)將then()中第一個(gè)回調(diào)函數(shù)執(zhí)行的value賦值給了this.value。在new Promise()的回調(diào)函數(shù)中，如果執(zhí)行過resolve()的話，那么此時(shí)賦值就是第二次賦值了。同理this.status。當(dāng)出現(xiàn)語(yǔ)法報(bào)錯(cuò)的時(shí)候，會(huì)執(zhí)行catch,此時(shí)將錯(cuò)誤參數(shù)e同樣賦值給this.value。狀態(tài)也被變?yōu)閞ejected。同理如果在new Promise()回調(diào)中執(zhí)行過reject,那么此時(shí)賦值也是第二次賦值了。這就驗(yàn)證了阮一峰在Promise基礎(chǔ)介紹將的下面的代碼邏輯。

const promise = new Promise(function(resolve, reject) {
  throw new Error("test");
});
promise.catch(function(error) {
  console.log(error);
});
// Error: test

catch 跟then的第二個(gè)參數(shù)是一個(gè)邏輯。而且then的第二個(gè)參數(shù)實(shí)際我們很少回調(diào)。都寫catch來(lái)異常捕獲的。

其實(shí)寫這篇文章的時(shí)候，對(duì)Promise還是了解在表面上，但收獲依然還是有的，準(zhǔn)建理解了Promise是如何實(shí)現(xiàn)的，比如resolve和then回調(diào)的關(guān)系，