摘要：對(duì)象用于延遲計(jì)算和異步計(jì)算。一個(gè)對(duì)象代表著一個(gè)還未完成，但預(yù)期將來(lái)會(huì)完成的操作。接收一個(gè)函數(shù)作為參數(shù)接收函數(shù)作為參數(shù)支持鏈?zhǔn)秸{(diào)用是按照順序來(lái)執(zhí)行的，并且由觸發(fā)。下篇繼續(xù)完善，例如數(shù)據(jù)傳遞以及中函數(shù)返回一個(gè)時(shí)，如何處理。

Promise 對(duì)象用于延遲(deferred) 計(jì)算和異步(asynchronous ) 計(jì)算。一個(gè)Promise對(duì)象代表著一個(gè)還未完成，但預(yù)期將來(lái)會(huì)完成的操作。

先來(lái)一個(gè)例子 A 熟悉下語(yǔ)法

    var p = new Promise(function(resolve, reject){
        console.log("1");
        // 運(yùn)行后續(xù)的 callback 列表，例如：then,when等。否則，不會(huì)執(zhí)行then里面的函數(shù)
        resolve("go next"); 
    });
    
    // 只考慮成功
    p.then(function(){
        console.log(2, arguments);
        return "next";
    }, null).then(function(){
        console.log(3, arguments)
    }, null);
    
    // 輸出
    1
    2 ["go next"]
    3 ["next"]

最初的設(shè)想

    function Promise(func){ // 接收一個(gè)函數(shù)作為參數(shù)
    
    }
    
    Promise.prototype = {
    
        then: function(callback){ // 接收函數(shù)作為參數(shù)
            
            return this; // 支持鏈?zhǔn)秸{(diào)用
        }
    } 

觀察例 A，resolve是一個(gè)函數(shù)，并且不是用戶(hù)傳的，所有Promise自身應(yīng)該有一個(gè)resolve方法，并且這個(gè)方法要傳遞給Promise構(gòu)造器里面的函數(shù)作為參數(shù)。

    function Promise(func){ // 接收一個(gè)函數(shù)作為參數(shù)
        **func(this.resolve);**
    }
    
    Promise.prototype = {
        
        **resolve: function(){
        
        }**,
        
        then: function(callback){ // 接收函數(shù)作為參數(shù)
            
            return this; // 支持鏈?zhǔn)秸{(diào)用
        }
    }

Promise是按照順序來(lái)執(zhí)行callback的，并且由resolve觸發(fā)。

    function Promise(func){ // 接收一個(gè)函數(shù)作為參數(shù)
        **this.doneList = []; // callback 列表**
        **func(this.resolve.bind(this)); // 順帶綁定this對(duì)象**
    }
    
    Promise.prototype = {
        
        resolve: function(){
            **//執(zhí)行回調(diào)列表
            while(true){
                if( this.doneList.length === 0 ){
                    break;
                }
                this.doneList.shift().apply(this);
            }**
        },
        
        then: function(callback){ // 接收函數(shù)作為參數(shù)
            **this.doneList.push(callback); // 加入到回調(diào)隊(duì)列**
            return this; // 支持鏈?zhǔn)秸{(diào)用
        }
    }

好，現(xiàn)在寫(xiě)一個(gè)測(cè)試用例

    var p =new Promise(function(resolve){
            console.log("a");
            resolve();
        }).then(function(){
            console.log("b");
        });
        
     // 輸出
     "a"

什么鬼？打印下p

    console.log(p);

我們發(fā)現(xiàn)原來(lái)doneList里面還有一個(gè)函數(shù)沒(méi)有運(yùn)行，再運(yùn)行下這個(gè)函數(shù)

    p.doneList[0].call(this);
    
    //結(jié)果
    console.log("b"); // 打印 b

打斷點(diǎn)跟蹤，發(fā)現(xiàn)Promise先執(zhí)行resolve方法，然后執(zhí)行then，把函數(shù)push到doneList。但是，再也沒(méi)有執(zhí)行過(guò)doneList里面的函數(shù)了。怎么辦呢？我們可以給Promise加一個(gè)屬性(state)來(lái)描述當(dāng)前狀態(tài)，分為【未完成】(pending)和【完成】(done)。如果執(zhí)行then時(shí)，狀態(tài)已經(jīng)是完成態(tài)，那么切換到未完成態(tài)，并執(zhí)行resolve方法。

    function Promise(func){ // 接收一個(gè)函數(shù)作為參數(shù)
        **this.state = "pending"; // 初始化狀態(tài)**
        this.doneList = []; // callback 列表
        func(this.resolve.bind(this)); // 順帶綁定this對(duì)象
    }
    
    Promise.prototype = {
        
        resolve: function(){
            //執(zhí)行回調(diào)列表
            while(true){
                if( this.doneList.length === 0 ){
                    **this.state = "done"; // 回調(diào)列表為空，改變狀態(tài)**
                    break;
                }
                this.doneList.shift().apply(this);
            }
        },
        
        then: function(callback){ // 也是接收函數(shù)
            this.doneList.push(callback); // 加入到回調(diào)隊(duì)列
            
            if( this.state === "done"){
                this.state = "pneding";
                this.resolve();
            }
            
            return this; // 支持鏈?zhǔn)秸{(diào)用
        }
    }

用和上面類(lèi)似的例子再次測(cè)試

    var p =new Promise(function(resolve){
            console.log("a");
            resolve();
        }).then(function(){
            console.log("b");
        }).then(function(){
            console.log("c");
        });

結(jié)果截圖

這下，我們自定義的Promise基礎(chǔ)功能完成了最核心的部分了。也許有人會(huì)疑問(wèn)，你這寫(xiě)的什么鬼？下面的代碼更簡(jiǎn)單，也能實(shí)現(xiàn)相同的功能

    function Promise(func){ // 接收一個(gè)函數(shù)作為參數(shù)
   
        func(this.resolve.bind(this)); // 順帶綁定this對(duì)象
    }
    
    Promise.prototype = {
        
        resolve: function(){
            //什么也不干    
        },
        
        then: function(callback){ // 也是接收函數(shù)
            callback.call(this); // 直接運(yùn)行
            return this; // 支持鏈?zhǔn)秸{(diào)用
        }
    }

測(cè)試用例

    var p =new Promise(function(resolve){
            console.log("d");
            resolve();
        }).then(function(){
            console.log("e");
        }).then(function(){
            console.log("f");
        });

結(jié)果：

但是，文章最前面說(shuō)過(guò)

Promise 對(duì)象用于延遲(deferred) 計(jì)算和異步(asynchronous ) 計(jì)算

并且會(huì)順序執(zhí)行回調(diào)列表（doneList）。最終代碼及測(cè)試

   function Promise(func){
        this.state = "pending";
        this.doneList = []; 
        func(this.resolve.bind(this)); 
    }

    Promise.prototype = {
        
        resolve: function(){
            while(true){
                if( this.doneList.length === 0 ){
                    this.state = "done";
                    break;
                }
                this.doneList.shift().apply(this);
            }
        },
        
        then: function(callback){ 
            this.doneList.push(callback); 
            if( this.state === "done"){
                this.state = "pending";
                this.resolve();
            }
            return this; 
        }
    }

    var p = new Promise(function(resolve){
            window.setTimeout(function(){
                console.log("d");
                resolve();
            }, 1000);
        }).then(function(){
            console.log("e");
        }).then(function(){
            console.log("f");
        });

    console.log("被阻塞了嗎？");

輸出：

先輸出"被阻塞了嗎？"，一秒鐘后相繼輸出 d、e、f 。可以看出，不但沒(méi)有阻塞后面的代碼執(zhí)行，而且回調(diào)也是按照順序執(zhí)行的。

結(jié)束。

下篇繼續(xù)完善，例如數(shù)據(jù)傳遞以及then中函數(shù)返回一個(gè)Promise時(shí)，如何處理。歡迎大家有疑問(wèn)或者建議，一起來(lái)交流。