摘要：如果讓你實(shí)現(xiàn)一個(gè)你會(huì)怎么做自己實(shí)現(xiàn)的大體思路我們要明確我們需要一個(gè)異步的操作方法滿(mǎn)足異步回調(diào)。所以選擇加入作為實(shí)現(xiàn)的基礎(chǔ)，讓函數(shù)實(shí)現(xiàn)延遲觸發(fā)。測(cè)試代碼測(cè)試第二版實(shí)現(xiàn)返回一個(gè)觸發(fā)返回一個(gè)觸發(fā)

我們要明確我們需要一個(gè)異步的操作方法,滿(mǎn)足異步回調(diào)。所以選擇加入setTimeout 作為實(shí)現(xiàn)的基礎(chǔ)， 讓函數(shù)實(shí)現(xiàn)延遲觸發(fā)。

保持一個(gè)原則，控制 promise 改變狀態(tài)的只有 promise 構(gòu)造函數(shù)里的 reslove 、 reject 函數(shù)。

鏈?zhǔn)秸{(diào)用的原理， 類(lèi)似jQuery，它會(huì)在調(diào)用方法后， return this. 從而形成鏈?zhǔn)秸{(diào)用。所以我們采用在調(diào)用then(fn)、 catch(fn) 后 會(huì)返回一個(gè)新的 promise 對(duì)象， 然而 這個(gè) promise 對(duì)象 受到 它的上級(jí)promise 對(duì)象的狀態(tài)結(jié)果 和 fn 運(yùn)行結(jié)果的控制。

知識(shí)點(diǎn)：
里面 應(yīng)該 用到點(diǎn) js 作用域 、 函數(shù)閉包、 繼承 、 上下文 綁定知識(shí)、引用傳遞。

cbList、rhList、 cs 這個(gè)三個(gè)， Promise 對(duì)象能直接訪問(wèn)， 如果對(duì)其直接操作可能造成 程序紊亂。

代碼如有紕漏，望大家指正

var JcPromise = function (fn) {
    // 防止 用戶(hù) 直接 更改 state
    var state = "wait"
     // state 為 resolve 狀態(tài)， 回調(diào)函數(shù)數(shù)組
    var cbList = []
     // state 為 reject 狀態(tài)， 回調(diào)函數(shù)數(shù)組
    var rjList = []
    this.cbList = cbList
    this.rjList = rjList
    // 
    this.cs = undefined
    // 獲取 promise 的狀態(tài)
    this.getState = function () {
        return state
    }
    /* 函數(shù)閉包，函數(shù) 定義在里面， 防止 外面用戶(hù) 直接 使用 resolve 和 reject; */
    // Promise成功觸發(fā) 函數(shù)
    var reslove = function (data) {
        this.cs = data
        if (state !== "wait") {
            return
        } else {
            state = "solve"
            while (this.cbList.length) {
                cbList.shift()(data)
            }
        }
    }
   // Promise 拒絕 觸發(fā)函數(shù)
    var reject = function (e) {
        this.cs = e
        if (state !== "wait") {
            return
        } else {
            state = "reject"
            while (rjList.length) {
                rjList.shift()(e)
            }
        }
    }
// 綁定函數(shù) conext 及 this 為當(dāng)前 promise對(duì)象
    reslove = reslove.bind(this)
    reject = reject.bind(this)
// 延遲 觸發(fā)
    setTimeout(function () {
        fn(reslove, reject)
    }, 0)
}
JcPromise.prototype.then = function (fn) {
    var handleObj = {}
    var nextPromise = new JcPromise(function (r, j) {
        handleObj.r = r
        handleObj.j = j
    })
    var fixFn = function (data) {
        var result = null
        try {
            result = fn(data)
              // 判斷result是不是 JcPromise實(shí)例。
            if (result instanceof JcPromise) {
                result.then(function (data) {
                    handleObj.r(data)
                }).catch(function (e) {
                    handleObj.j(e)
                })
            } else  {
                handleObj.r(result)
            }
        } catch (e){
            handleObj.j(e)
        }
    }
    //判斷當(dāng)前狀態(tài) 如果 是 solve 直接 運(yùn)行， 如果不是，酒吧 fixFn 推入 cbList 數(shù)組。
    if (this.getState() === "solve") {
        setTimeout(function () {
            fixFn(this.cs)
        }, 0)
    } else {
        this.cbList.push(fixFn)
    }
    return nextPromise
}
JcPromise.prototype.catch = function (fn) {
    var handleObj = {}
    var nextPromise = new JcPromise(function (r, j) {
        handleObj.r = r
        handleObj.j = j
    })
    var fixFn = function (e) {
        var result = null
        try {
            result = fn(e)
            if (result instanceof JcPromise) {
                result.then(function (data) {
                    handleObj.r(data)
                }).catch(function (e) {
                    handleObj.j(e)
                })
            } else {
                handleObj.r(result)
            }
        } catch (e){
            handleObj.j(e)
        }
    }
    if (this.getState() === "reject") {
        setTimeout(function () {
            fixFn(this.cs)
        }, 0)
    } else {
        this.rjList.push(fixFn)
    }
    return nextPromise
}

// 測(cè)試代碼
var p = new JcPromise(function(r, j) {
    setTimeout(function() {r(100)}, 3000)
}).then(data => {
    console.log("1", data)
    return new JcPromise((r, j) => {
        setTimeout(() => {
            r("hi")
        }, 3000)
    })
}).then(data => console.log("2", data)).then(function () {
    console.log("xxx", xx + 1)
}).catch(e => console.log(e)).then(data => console.log(data, "end"))

demo 測(cè)試
第二版 jcPromise 實(shí)現(xiàn)

    var JcPromise = (function() {
        function JcPromise(fn) {
            fn = fn || noop;
            var statusList = ["start", "pending", "succeed", "err"];
            var cbStatus = [0, 1];
            var status = statusList[0];
            var data = null;
            var err = null;
            var that = this;
            var successFn = [];
            var errFn = [];

            function resolve(d) {
                data = d;
                that._changeStatus(2);
            };

            function reject(e) {
                err = e;
                that._changeStatus(3);
            };
            this.getData = function() {
                return data;
            };
            this.getErr = function() {
                return err
            };
            this.getStatus = function() {
                return status
            };
            this._changeStatus = function(idx) {
                switch (status) {
                    case statusList[2]:
                    case statusList[3]:
                        {
                            return false
                        }
                };
                status = statusList[idx];
                if (status === statusList[3]) {
                    setTimeout(function() {
                        that._triggerCatch();
                    }, 0)
                }
                if (status === statusList[2]) {
                    setTimeout(function() {
                        that._triggerThen();
                    }, 0)
                }
            };
            this._pushThenCb = function(cb) {
                successFn.push({
                    status: cbStatus[0],
                    cb: cb
                });
                if (status === statusList[2]) {
                    this._triggerThen();
                }
            };
            this._pushCatchCb = function(cb) {
                errFn.push({
                    status: cbStatus[0],
                    cb: cb
                });
                if (status === statusList[3]) {
                    this._triggerCatch();
                }
            };
            this._triggerThen = function() {
                successFn.map(function(item) {
                    if (item.status === cbStatus[0]) {
                        item.cb(data);
                        item.status = cbStatus[1];
                    }
                })
            };
            this._triggerCatch = function() {
                errFn.map(function(item) {
                    if (item.status === cbStatus[0]) {
                        item.cb(err);
                        item.status = cbStatus[1];
                    }
                })
            };
            this._changeStatus(1);
            this.uuid = uuid++;
            try {
                fn(resolve, reject);
            } catch (e) {
                reject(e)
            }
            return this
        };
        JcPromise.fn = JcPromise.prototype;
        // 返回一個(gè)promise
        JcPromise.fn.then = function(cb) {
            var promiseR = null;
            var promiseJ = null;
            var result = null;
            var that = this;
            var fn = function() {
                setTimeout(function() {
                    try {
                        var data = that.getData();
                        result = cb(data);
                        if (typeof result === "object" && result !== null && result.constructor === JcPromise) {
                            result.then(function(data) {
                                promiseR(data)
                            }).catch(function(e) {
                                promiseJ(e)
                            })
                        } else {
                            promiseR(result)
                        }
                    } catch (e) {
                        promiseJ(e)
                    }
                }, 0);
            };
            this._pushThenCb(fn);
            // 觸發(fā)promise
            return new JcPromise(function(r, j) {
                promiseR = r;
                promiseJ = j;
            });
        };
        // 返回一個(gè)promise
        JcPromise.fn.catch = function(cb) {
            var promiseR = null;
            var promiseJ = null;
            var result = null;
            var that = this;
            var fn = function() {
                setTimeout(function() {
                    try {
                        var data = that.getErr();
                        result = cb(data);
                        if (typeof result === "object" && result !== null && result.constructor === JcPromise) {
                            result.then(function(data) {
                                promiseR(data)
                            }).catch(function(e) {
                                promiseJ(e)
                            })
                        } else {
                            promiseR(result)
                        }
                    } catch (e) {
                        promiseJ(e)
                    }
                }, 0)
            };
            this._pushCatchCb(fn);
            // 觸發(fā)promise
            return new JcPromise(function(r, j) {
                promiseR = r;
                promiseJ = j;
            });
        };
        return JcPromise
    })();