2. 程式人生 > >前端面試？這份手擼Promise請你收下

前端面試？這份手擼Promise請你收下

阿新 • • 發佈：2020-08-16

前言

　　現在很多大廠面試前端都會要求能夠手動的寫出一個Promise，所以這裡整理了一份手寫的Promise。

　　絕對詳細，功能絕對強大。如果你不瞭解Promise的基本使用，那麼本篇文章可能不太適合你，如果你對Promise有過一些瞭解，那麼這篇文章絕對是你進階的好幫手。

　　除開catch()以及finally()和allSettled介面沒實現之外，其他的所有原生Promise支援的功能此手寫的Promise都支援。

　　書寫Promise的難度其實就在於then()方法的鏈式呼叫以及值穿透傳遞，其他的其實都還好。

　　讓這篇文章滾進你的收藏夾吧！

Promise狀態實現

　　在原生Promise

中具有三種狀態，分別是

pending：未解決狀態

fulfilled：已解決狀態

rejected：解決失敗狀態

　　所以第一步，要先實現這三種狀態。

　　並且在原生Promise中具有value用於記錄resolve()與reject()中的值用於傳遞給then()方法。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {
                this.status = MyPromise.PENDING;  // 初始為準備狀態
                this.value = null;  // 初始值
        }

}

Promise執行函式

　　原生Promise的建構函式中會接收一個executor引數，該引數當是一個函式。

　　用於同步的執行當前任務，當任務完成後應該具有resolve()方法以及reject()方法來通知then()方法當前執行任務的執行狀態並傳遞值。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {
                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                executor(this.resolve, this.reject);  // 傳遞形參，執行executor函式
        }

        resolve(value) {

                this.status = MyPromise.FUFILLED;
                this.value = value;
        }

        reject(reason) {

                this.status = MyPromise.REJECTED;
                this.value = reason;

        }
}

　　上面這樣寫在執行resolve()以及reject()時會出現問題，原因是this指向為undefiled(嚴格模式)。

<script src="./Promise核心.js"></script>
<script>

        "use strict";

        let p1 = new MyPromise((resolve, reject) => {
                resolve("成功")
        })

        console.log(p1);

</script>

　　這是由於我們在執行函式中呼叫了resolve()與reject()，故this指向為executor的函式上下文。

　　解決這個問題可以使用bind()來改變this指向。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {
              
                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值
                executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
        }

        resolve(value) {
         
                this.status = MyPromise.FUFILLED;
                this.value = value;
        }

        reject(reason) {

                this.status = MyPromise.REJECTED;
                this.value = reason;

        }
}

Promise狀態限制

　　當前Promise狀態只應該改變一次而不能多次改變，顯然我們上面的程式碼不能做到這點限制。

<script src="./Promise核心.js"></script>
<script>

        "use strict";

        let p1 = new MyPromise((resolve, reject) => {

                resolve("成功");
                reject("失敗");

                // 對於原生Promise來說，狀態只能改變一次。但是這裡卻允許兩次改變，故是有問題的
        })

        console.log(p1);  // MyPromise {status: "rejected", value: "失敗"}

</script>

　　所以這裡要對程式碼加上限制。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值
                executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                }
        }
}

Promise執行異常

　　在執行函式executor中可能引發異常，這會讓當前的Promise的狀態改變為rejected。

　　所以在上面程式碼基礎上需要加入try...catch進行處理。

　　當then()方法捕捉到執行函式executor中的異常時，可以讓第二個引數的函式對其異常進行處理，但是我們目前還沒實現then()，所以直接丟給reject()即可，當實現then()時自然會使用到reject()中傳遞過來的值。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                }
        }
}

then方法基礎實現

　　原生的Promise狀態改變後，可以執行其下的then()方法，所以我們需要來封裝出一個then()方法。

　　then()方法接收兩個函式，第一個函式onFulfilled用於處理上一個Promise的fulfilled狀態，第二個函式onRejected用於處理上一個Promise的rejected狀態。

　　並且then()方法中的這兩個函式都應該具有一個形參，用於接收到Promise的resolve()或reject()中傳遞的值。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                }
        }

        then(onFulfilled, onRejected) {

                if(this.status == MyPromise.FUFILLED){  // 狀態改變時執行
                        onFulfilled(this.value);
                }

                if(this.status == MyPromise.REJECTED){  // 狀態改變時執行
                        onRejected(this.value);
                }
        }
}

then方法引數優化

　　上面已經說過，then()方法具有兩個引數，這兩個引數分別對應兩個函式用來處理上一個Promsie的resolve()與reject()。

　　但是在原生Promise中，這兩個方法可以不進行傳遞，所以我們需要對上述程式碼進行優化。

　　當then()方法中的某一個引數不為函式時，讓它自動建立一個空函式。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                }
        }

        then(onFulfilled, onRejected) {
                if(typeof onFulfilled != "function"){  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = ()=>{};
                }

                if(typeof onRejected != "function"){  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = ()=>{};
                }

                if(this.status == MyPromise.FUFILLED){  // 狀態改變時執行
                        onFulfilled(this.value);
                }

                if(this.status == MyPromise.REJECTED){  // 狀態改變時執行
                        onRejected(this.value);
                }
        }
}

then方法異常捕獲

　　當then()方法中處理fulfilled狀態的函式onFulfilled或者處理rejected狀態的函式onRejected在執行時出現異常應該進行捕獲並且傳遞給下一個then()的處理rejected狀態的函式onRejected。

　　這裡我們先讓所有的異常都交由當前then()處理rejected狀態的函式onRejected，後面再進行優化。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                }
        }

        then(onFulfilled, onRejected) {
                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => { };
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => { };
                }

                if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                        try {  // then處理成功的函式onFulfilled中出現異常，交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                onFulfilled(this.value);
                        } catch (e) {
                                onRejected(e);
                        }

                }

                if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                        try {  // then處理失敗的函式onRejected中出現異常,交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                onRejected(this.value);
                        } catch (e) {
                                onRejected(e);
                        }
                }
        }
}

then方法非同步執行

　　在原生的Promise中，executor函式是同步執行的，而then()方法是非同步執行故排在同步執行之後。

　　但是我們的Promise卻沒有做到這一點，下面的實驗將說明這個問題

<script src="./Promise核心.js"></script>
<script>

        "use strict";

        let p1 = new MyPromise((resolve, reject) => {

                reject("失敗");

        }).then(
                null,
                error => {
                        console.log(error);  // 先列印  失敗
                }
        )

        console.log("hello,Promise");  // 後列印  hello,Promise

</script>

　　最簡單的解決方案就是為then()中處理成功或處理失敗的函式執行外套上一個setTimeout，讓其處理排線上程同步任務執行之後再進行執行。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                }
        }

        then(onFulfilled, onRejected) {
                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => { };
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => { };
                }

                if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                        setTimeout(() =>  {  // 晚於執行緒同步任務執行
                                try {  // then處理成功的函式onFulfilled中出現異常，交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onFulfilled(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

                if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                        setTimeout(() =>  {  // 晚於執行緒同步任務執行
                                try {  // then處理失敗的函式onRejected中出現異常,交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onRejected(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }
        }
}

執行函式非同步阻塞

　　此時我們的程式碼仍然具有一個問題，即在執行函式executor中使用setTimeout時，下面的then()會進行阻塞。

　　這是因為當前Promise狀態是pending而then()方法中並沒有對pending狀態進行處理的策略所導致的。

<script src="./Promise核心.js"></script>
<script>


        "use strict";

        new MyPromise((resolve, reject) => {
                setTimeout(() => {
                        resolve("成功");  // 同步任務執行完三秒後才會改變當前Promise狀態
                }, 3000);  

        }).then((success) => {  // 但是這裡先執行了then，Promise狀態為pending，故發生阻塞
                console.log(success);  // 阻塞了，不列印
        })

</script>

　　既然當前Promise狀態是pending，3秒後狀態才發生改變，那麼我們就可以通過不斷的迴圈來看看它何時改變狀態。

　　所以第一步是定義一個執行非同步的陣列。然後再將then()中處理正確的函式onFulfilled與處理錯誤的函式onRejected壓進去。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                this.callbacks = []; // 如果是一個非同步操作，則放入該陣列中

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }

             
        }

        resolve(value) {
             
                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;
                        })
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;
                }
        }

        then(onFulfilled, onRejected) {

                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => { };
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => { };
                }

                if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                        setTimeout(() =>  {  // 晚於執行緒同步任務執行
                                try {   // then處理成功的函式onFulfilled中出現異常，交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onFulfilled(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

                if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                        setTimeout(() =>  {  // 晚於執行緒同步任務執行
                                try {  // then處理失敗的函式onRejected中出現異常,交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onRejected(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

                if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。
                        this.callbacks.push({
                                onFulfilled,
                                onRejected,
                        });
                }
        }
}

　　當陣列壓入完成後，執行函式executor會去呼叫resolve()或者reject()改變當前Promise狀態。

　　所以我們還需要在resolve()與reject()方法中對非同步的陣列處理函式進行呼叫。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                this.callbacks = []; // 如果是一個非同步操作，則放入該陣列中

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }

             
        }

        resolve(value) {
             
                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;

                        this.callbacks.map(callback => {  // // 呼叫處理非同步executor裡resolve的方法。
                                callback.onFulfilled(value);
                        })
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                        this.callbacks.map(callback => {  // 呼叫處理非同步executor裡reject的方法。
                                callback.onRejected(reason);
                        })

                }
        }

        then(onFulfilled, onRejected) {

                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => { };
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => { };
                }

                if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                        setTimeout(() =>  {  // 晚於執行緒同步任務執行
                                try {  // then處理成功的函式onFulfilled中出現異常，交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onFulfilled(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

                if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                        setTimeout(() =>  {  // 晚於執行緒同步任務執行
                                try {  // then處理失敗的函式onRejected中出現異常,交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onRejected(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

                if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。
                        this.callbacks.push({
                                onFulfilled,
                                onRejected,
                        });
                }
        }
}

非同步執行函式的then異常捕獲

　　上面我們對同步執行函式executor呼叫then()方法中可能出現的異常進行了處理。

　　就是下面這一段程式碼。

                if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                        setTimeout(() =>  {  // 晚於執行緒同步任務執行
                                try {  // then處理成功的函式onFulfilled中出現異常，交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onFulfilled(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

                if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                        setTimeout(() =>  {  // 晚於執行緒同步任務執行
                                try {  // then處理失敗的函式onRejected中出現異常,交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onRejected(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

　　但是我們還沒有對非同步執行函式executor呼叫then()方法中可能出現的異常進行處理。

             if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。
                        this.callbacks.push({
                                onFulfilled,
                                onRejected,
                        });
                }
        }

　　這會導致下面這樣的使用場景出現問題。

<script src="./Promise核心.js"></script>
<script>

        "use strict";

        new MyPromise((resolve, reject) => {
                setTimeout(() => {
                        resolve("成功");
                }, 3000);

        }).then((success) => {
                throw new Error("自定義異常丟擲");  // 直接在處理成功狀態的函式onFulfilled中丟擲了異常，顯然是不符合原生Promise的
        });

</script>

　　那麼我們就來加上異常捕獲即可，這裡還是先傳遞給當前then()處理rejected狀態的函式，後面會做修改。

　　因為原版Promise會傳遞給下一個then()中處理rejected狀態的函式，而不是當前then()。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                this.callbacks = []; // 如果是一個非同步操作，則放入該陣列中

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;

                        this.callbacks.map(callback => {  // // 呼叫處理非同步executor裡resolve的方法。
                                callback.onFulfilled(value);
                        })
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                        this.callbacks.map(callback => {  // 呼叫處理非同步executor裡reject的方法。
                                callback.onRejected(reason);
                        })

                }
        }

        then(onFulfilled, onRejected) {

                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => { };
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => { };
                }

                if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                        setTimeout(() => {  // 晚於執行緒同步任務執行
                                try {  // then處理成功的函式onFulfilled中出現異常，交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onFulfilled(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

                if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                        setTimeout(() => {  // 晚於執行緒同步任務執行
                                try {  // then處理失敗的函式onRejected中出現異常,交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                        onRejected(this.value);
                                } catch (e) {
                                        onRejected(e);
                                }
                        })
                }

                if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。

                        this.callbacks.push({
                                onFulfilled: value => {
                                        try {  //  非同步executor改變狀態對其then中的onFulfilled進行異常捕獲
                                                onFulfilled(value);
                                        } catch (e) {
                                                onRejected(e);
                                        }
                                },
                                onRejected: value => {
                                        try {  //  非同步executor改變狀態對其then中的onRejected進行異常捕獲
                                                onRejected(value);
                                        } catch (e) {
                                                onRejected(e);
                                        }
                                }
                        });
                }
        }
}

then方法鏈式操作

　　對於原生的Promise來講，每一個then()最後返回的都是一個新的Promise。所以才能達到支援不斷的then()進行鏈式操作，所以我們也可以這樣做。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                this.callbacks = []; // 如果是一個非同步操作，則放入該陣列中

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;

                        this.callbacks.map(callback => {  // // 呼叫處理非同步executor裡resolve的方法。
                                callback.onFulfilled(value);
                        })
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                        this.callbacks.map(callback => {  // 呼叫處理非同步executor裡reject的方法。
                                callback.onRejected(reason);
                        })

                }
        }

        then(onFulfilled, onRejected) {

                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => { };
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => { };
                }

                return new MyPromise((resolve, reject) => { // 返回一個新的Promise

                        if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {  // then處理成功的函式onFulfilled中出現異常，交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                                onFulfilled(this.value);
                                        } catch (e) {
                                                onRejected(e);
                                        }
                                })
                        }

                        if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {  // then處理失敗的函式onRejected中出現異常,交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                                onRejected(this.value);
                                        } catch (e) {
                                                onRejected(e);
                                        }
                                })
                        }

                        if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。

                                this.callbacks.push({
                                        onFulfilled: value => {
                                                try {  //  非同步executor改變狀態對其then中的onFulfilled進行異常捕獲
                                                        onFulfilled(value);
                                                } catch (e) {
                                                        onRejected(e);
                                                }
                                        },
                                        onRejected: value => {
                                                try {  //  非同步executor改變狀態對其then中的onRejected進行異常捕獲
                                                        onRejected(value);
                                                } catch (e) {
                                                        onRejected(e);
                                                }
                                        }
                                });
                        }
                });


        }
}

　　現在我們的Promise已經支援then()的鏈式操作了，但是上面程式碼還是遺留了幾個問題。

　　1.then()還沒有返回值，返回普通值該怎麼處理，返回一個新的Promise該怎麼處理

　　2.沒有異常傳遞，原生Promise中的then()當丟擲異常時應該進行捕獲並傳遞給下一個then()

　　3.不支援then()穿透

　　4.不支援型別限制

　　接下來繼續對程式碼做出優化調整。

then中返回普通值

　　在原生的Promise中每一個then()所產生的Promise預設狀態都是fulfilled，如果當前then()返回是一個值的話那麼下一個then()將接受到該值。

　　這個也非常簡單，程式碼接收一下每一個onFulfilled()與onRejected()的返回值就好，並使用resolve()改變狀態為fulfilled以及將值進行傳遞給下一個then()。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                this.callbacks = []; // 如果是一個非同步操作，則放入該陣列中

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;

                        this.callbacks.map(callback => {  // // 呼叫處理非同步executor裡resolve的方法。
                                callback.onFulfilled(value);
                        })
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                        this.callbacks.map(callback => {  // 呼叫處理非同步executor裡reject的方法。
                                callback.onRejected(reason);
                        })

                }
        }

        then(onFulfilled, onRejected) {

                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => { };
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => { };
                }

                return new MyPromise((resolve, reject) => { // 返回一個新的Promise

                        if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {  // then處理成功的函式onFulfilled中出現異常，交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                                let result = onFulfilled(this.value);
                                                resolve(result);
                                        } catch (e) {
                                                onRejected(e);
                                        }
                                })
                        }

                        if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {  // then處理失敗的函式onRejected中出現異常,交由當前then處理失敗的函式onRejected函式進行處理。這個後面會做優化
                                                let result = onRejected(this.value);
                                                resolve(result);
                                        } catch (e) {
                                                onRejected(e);
                                        }
                                })
                        }

                        if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。

                                this.callbacks.push({
                                        onFulfilled: value => {
                                                try {  //  非同步executor改變狀態對其then中的onFulfilled進行異常捕獲
                                                        let result = onFulfilled(value);
                                                        resolve(result);
                                                } catch (e) {
                                                        onRejected(e);
                                                }
                                        },
                                        onRejected: value => {
                                                try {  //  非同步executor改變狀態對其then中的onRejected進行異常捕獲
                                                        let result = onRejected(value);
                                                        resolve(result);
                                                } catch (e) {
                                                        onRejected(e);
                                                }
                                        }
                                });
                        }
                });


        }
}

　　這樣我們的then()就支援返回普通值了。

<script src="./Promise核心.js"></script>
<script>

        "use strict";

        new MyPromise((resolve, reject) => {
                setTimeout(() => {
                        resolve("成功");
                }, 3000);
        }).then((success) => {
                return "hello";
        }).then((success)=>{ 
                console.log(success);  // hello
        });

</script>

then中的異常傳遞

　　在上面的程式碼中，then()方法裡的處理成功函式onFulfilled以及處理失敗函式onRejected在程式碼執行時丟擲的異常都會統一進行捕獲並且傳遞給當前then()方法處理失敗的函式onRejected。

　　這個與原生的Promise有出入，對於原生Promise來講應該是傳遞給下一個then()進行處理而不是當前then()。

　　改動也非常簡單，將原來發生異常傳遞的函式onRejected()改為reject()即可，這就是傳遞給下一個then()。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                this.callbacks = []; // 如果是一個非同步操作，則放入該陣列中

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;

                        this.callbacks.map(callback => {  // // 呼叫處理非同步executor裡resolve的方法。
                                callback.onFulfilled(value);
                        })
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                        this.callbacks.map(callback => {  // 呼叫處理非同步executor裡reject的方法。
                                callback.onRejected(reason);
                        })

                }
        }

        then(onFulfilled, onRejected) {

                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => { };
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => { };
                }

                return new MyPromise((resolve, reject) => { // 返回一個新的Promise

                        if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try { 
                                                let result = onFulfilled(this.value);
                                                resolve(result);
                                        } catch (e) {
                                                reject(e); // 傳遞給下一個then
                                        }
                                })
                        }

                        if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {  
                                                let result = onRejected(this.value);
                                                resolve(result);
                                        } catch (e) {
                                                reject(e); // 傳遞給下一個then
                                        }
                                })
                        }

                        if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。

                                this.callbacks.push({
                                        onFulfilled: value => {
                                                try {  
                                                        let result = onFulfilled(value);
                                                        resolve(result);
                                                } catch (e) {
                                                        reject(e); // 傳遞給下一個then
                                                }
                                        },
                                        onRejected: value => {
                                                try { 
                                                        let result = onRejected(value);
                                                        resolve(result);
                                                } catch (e) {
                                                        reject(e); // 傳遞給下一個then
                                                }
                                        }
                                });
                        }
                });


        }
}

<script src="./Promise核心.js"></script>
<script>

        "use strict";

        new MyPromise((resolve, reject) => {
                setTimeout(() => {
                        resolve("成功");
                }, 3000);
        }).then((success) => {
                throw new Error("新錯誤");
        }).then(null, error => {
                console.log(error);  // 上一個then的錯誤成功由該then接收
        });

</script>

then穿透功能實現

　　在原生的Promise中是支援then()的穿透傳值的。

<script>

        "use strict";

        new Promise((resolve, reject) => {

                resolve("成功");

        })
                .then() // 穿透
                .then(
                        success => {
                                console.log(success); // 成功

                        },
                        error => {
                                console.log(error);
                        })

</script>

　　但是我們的Promise卻不支援。

<script src="./Promise核心.js"></script>
<script>

        "use strict";

        new MyPromise((resolve, reject) => {

                resolve("成功");

        })
                .then() // 不支援穿透
                .then(
                        success => {
                                console.log(success); 

                        },
                        error => {
                                console.log(error);
                        })

</script>

　　原因在於如果沒有對then()進行傳遞引數，那麼內部其實是會建立兩個空函式。

　　我們只需要在空函式內部返回this.value即可。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                this.callbacks = []; // 如果是一個非同步操作，則放入該陣列中

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;

                        this.callbacks.map(callback => {  // // 呼叫處理非同步executor裡resolve的方法。
                                callback.onFulfilled(value);
                        })
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                        this.callbacks.map(callback => {  // 呼叫處理非同步executor裡reject的方法。
                                callback.onRejected(reason);
                        })

                }
        }

        then(onFulfilled, onRejected) {

                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => this.value;  // 支援穿透
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => this.value;  // 支援穿透
                }

                return new MyPromise((resolve, reject) => { // 返回一個新的Promise

                        if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {  
                                                let result = onFulfilled(this.value);
                                                resolve(result);
                                        } catch (e) {
                                                reject(e); // 傳遞給下一個then
                                        }
                                })
                        }

                        if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {  
                                                let result = onRejected(this.value);
                                                resolve(result);
                                        } catch (e) {
                                                reject(e); // 傳遞給下一個then
                                        }
                                })
                        }

                        if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。

                                this.callbacks.push({
                                        onFulfilled: value => {
                                                try {
                                                        let result = onFulfilled(value);
                                                        resolve(result);
                                                } catch (e) {
                                                        reject(e); // 傳遞給下一個then
                                                }
                                        },
                                        onRejected: value => {
                                                try {
                                                        let result = onRejected(value);
                                                        resolve(result);
                                                } catch (e) {
                                                        reject(e); // 傳遞給下一個then
                                                }
                                        }
                                });
                        }
                });


        }
}

then返回Promise

　　原生的Promise支援返回一個新的Promise，但是我們的Promise現在還不支援。

　　其實也很簡單，判斷一下then()中兩個函式返回的是不是一個新的Promise，如果是的話則使用其then()方法將其中resolve()或reject()的值進行傳遞。

class MyPromise {

        static PENDING = "pending";
        static FUFILLED = "fulfilled";
        static REJECTED = "rejected";

        constructor(executor) {

                this.status = MyPromise.PENDING;  // 初始狀態為準備狀態
                this.value = null;  // 初始值

                this.callbacks = []; // 如果是一個非同步操作，則放入該陣列中

                try {
                        executor(this.resolve.bind(this), this.reject.bind(this));  // 傳遞形參，執行executor函式
                } catch (e) {
                        this.status = MyPromise.REJECTED; // 異常發生改變狀態
                        this.reject(e); // 記錄異常資訊
                }


        }

        resolve(value) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.FUFILLED;
                        this.value = value;

                        this.callbacks.map(callback => {  // // 呼叫處理非同步executor裡resolve的方法。
                                callback.onFulfilled(value);
                        })
                }
        }

        reject(reason) {

                if (this.status == MyPromise.PENDING) {  // 限制
                        this.status = MyPromise.REJECTED;
                        this.value = reason;

                        this.callbacks.map(callback => {  // 呼叫處理非同步executor裡reject的方法。
                                callback.onRejected(reason);
                        })

                }
        }

        then(onFulfilled, onRejected) {

                if (typeof onFulfilled != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onFulfilled = () => this.value;  // 支援穿透
                }

                if (typeof onRejected != "function") {  // 如果傳入的不是一個函式，預設建立空函式
                        onRejected = () => this.value;  // 支援穿透
                }

                return new MyPromise((resolve, reject) => { // 返回一個新的Promise

                        if (this.status == MyPromise.FUFILLED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {
                                                let result = onFulfilled(this.value);
                                                if (result instanceof MyPromise) {  // 判斷是否返回Promise物件
                                                        result.then(resolve, reject);
                                                } else {
                                                        resolve(result); // 改變狀態並將值交由下一個then接收
                                                }
                                        } catch (e) {
                                                reject(e); // 傳遞給下一個then
                                        }
                                })
                        }

                        if (this.status == MyPromise.REJECTED) {   // 狀態改變時執行

                                setTimeout(() => {  // 晚於執行緒同步任務執行
                                        try {
                                                let result = onRejected(this.value);
                                                if (result instanceof MyPromise) {  // 判斷是否返回Promise物件
                                                        result.then(resolve, reject);
                                                } else {
                                                        resolve(result); // 改變狀態並將值交由下一個then接收
                                                }
                                        } catch (e) {
                                                reject(e); // 傳遞給下一個then
                                        }
                                })
                        }

                        if (this.status == MyPromise.PENDING) {  // 如果當前Promise是等待處理狀態，則將處理成功的函式與處理失敗的函式壓入非同步陣列。

                                this.callbacks.push({
                                        onFulfilled: value => {
                                                try {
                                                        let result = onFulfilled(value);
                                                        if (result instanceof MyPromise) {  // 判斷是否返回Promise物件
                                                                result.then(resolve, reject);
                                                        } else {
                                                                resolve(result); // 改變狀態並將值交由下一個then接收
                                                        }
                                                } catch (e) {
                                                        reject(e); // 傳遞給下一個then
                                                }
                                        },
                                        onRejected: value => {
                                                try {
                                                        let result = onRejected(value);
                                                        if (result instanceof MyPromise) {  // 判斷是否返回Promise物件
                                                                result.then(resolve, reject);

相關推薦

前端面試？這份手擼Promise請你收下

前言 　　現在很多大廠面試前端都會要求能夠手動的寫出一個Promise，所以這裡整理了一份手寫的Promise。 　　絕對詳細，功能絕對強大。如果你不瞭解Promise的基本使用，那麼本篇文章可能不太適合你，如果你對Promise有過一些瞭解，那麼這篇文章絕對是你進階的好幫手。 　　除開catch()以及fi

幹貨 | 這裏有份數學規劃求解器SCIP超詳細的使用教程，請你收下

obi 手動 ipopt -- 圖片 下使用 資料 php lan 前言 小夥伴們大家好呀！繼上次lp_solve規劃求解器的推文出來以後，大家都期待著更多求解器的具體介紹和用法。小編哪敢偷懶，這不，趕在考試周之際，又在忙裏偷閑中給大家送上一篇SCIP規劃求解的推文教程。快

CS3K.com | 全棧工程師人才最缺？這份求職攻略請收好！

全棧工程師是當今最著名和需要量最大的 IT 職位之一，很多IT 企業正在尋找全棧開發人才。但隨著 IT 行業複雜性和動態性的增加，成為全棧開發人員比以往任何時候都更加困難。   首先，你至少需要擁有以下技能 CS3K.com 紮實掌握計算機基礎知識 瞭解資料庫

如果想成為一名頂尖的前端，這份書單你一定要收藏！

歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~ 2014年一月以來，自己接觸web前端開發已經兩年多了，記錄一下自己前端學習路上看過的，以及道聽途說的一些書，基本上按照由淺入深來介紹。 JavaScript 入門 《JavaScr

收好這份攻略！帶你國慶免費玩轉海天醬油“迪士尼”

一年一度的國慶假期又到了，想去玩又不知道去哪兒玩？不想湊熱鬧瞎打卡，又想一次滿足吃、喝、玩、樂N個願望？沒問題！這裡是以醬油為主題的遊樂王國。走進醬油的天地，你既可以在這裡瞭解醬油文化知識、觀看3D電影 ，又可以在這裡品嚐美味黃豆宴、DIY醬油飯糰，還可以對著3D牆畫隨意凹造型，收穫最潮文化

Web前端面試指導(三十一)：談談你對this的理解

題目點評 主要考察你對面向物件程式設計的理解，特別是物件的指向問題，如果連物件的指向都搞不清楚，很難說明你是一個優秀的前端開發人員，所以回答this的知識點是體現你的身價的時候到來了！如果能夠回答好這個問題，那麼在面試上你是增值的。個人建議，可以先回答this在不同的場合指

【面試必備】手撕程式碼，你怕不怕？

Part 1.生產者-消費者問題這絕對是屬於重點了，不管是考察對於該重要模型的理解還是考察程式碼能力，這都是一道很好的考題，所以很有必要的，我們先來回顧一下什麼是生產者-消費者問題； 問題簡單回顧 如果想學習Java工程化、高效能及分散式、深入淺出。微服務、Spring，MyBatis，Netty原始碼分

想爬取各大網站的小姐姐？這份爬蟲速成指南送你了！包學會哦！

在spiders資料夾中建立一個python檔案，比如miao.py，來作為爬蟲的指令碼。程式碼如下：解析1.試試神奇的xpath2.看看xpath的效果在最上面加上引用：from scrapy import Selector把parse函式改成：我們再次執行一下，你就可以看

真的，這份工作可能不適合你！

但也可能很適合你！ 呵呵，開個玩笑，標題黨了，主要是為了吸引你能點進來，讓你別錯過一個機會。 我們領拓團隊（領拓雲合資訊科技有限公司）在北京中關村軟體園的孵化器，英文名LightOnUs，你應該從這個名字中讀出我們團隊對未來的願景。我只想說兩點： 第一，我們團隊的技術實

這份Python標準異常表 你應該瞭解！

異常即是一個事件，該事件會在程式執行過程中發生，影響了程式的正常執行。一般情況下，在Python無法正常處理程式時就會發生一個異常。異常是Python物件，表示一個錯誤。 小編給大家推薦一個學習氛圍超好的地方，python交流企鵝裙：【611+530+101】適合在校大

手擼Router——解決跨模組下的頁面跳轉

人之所以能，是相信能。 一、前言 開始模組化開發專案之後，一個很重要的問題就是頁面見的跳轉問題。 正是由於將專案模組化拆分，各模組之間沒有任何依賴關係，也互相不可見，那麼從A模組的a介面跳轉到B模組的b介面該怎麼辦呢？ 二、跨模組跳轉

這份書單會告訴你，Java網路程式設計其實很重要

![](https://img2020.cnblogs.com/other/1813797/202005/1813797-20200514074440268-833001464.jpg)![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAA

大數據入門學習路線分享，請大家收下

impala mysql AD 算法 數據倉庫 har frame art 框架 大數據的學習技術點Hadoop核心(1) 分布式存儲基石：HDFSHDFS簡介 入門演示 構成及工作原理解析：數據塊，NameNode, DataNode、數據寫入與讀取過程、數據復制、HA方

2021-2-22：請你說下 CAP 理論並舉例

# CAP CAP 理論是分散式系統中的一個老生常談的理論了，最早由 [Eric Brewer](https://www.linkedin.com/in/eric-brewer-1031254) 在[一個講座](https://people.eecs.berkeley.edu/~brewer/cs262b-

這份前端面試小冊子dog cheng帶來啦～

寫在前面 沒有錯，就是我啦dog cheng，好久不見，從17年在部落格園寫下第一篇文章，轉身間已然兩年，從大二到現在的大四預備畢業生，我仍然在這條道路上前進。秋招早已經結束，在拿到用友，滴滴的offer之後，最終在九月選擇了百度APP，但是我沒有停下，懷著學習的態度完成了一份90頁PDF ， 近140+co

面試官：來，年輕人！請手擼5種常見限流演算法！

1. **瞬時流量過高，服務被壓垮？** 2. **惡意使用者高頻光顧，導致伺服器宕機？** 3. **訊息消費過快，導致資料庫壓力過大，效能下降甚至崩潰？** ...... 在高併發系統中，出於系統保護角度考慮，通常會對流量進行限流；不但在工作中要頻繁使用，而且也是面試中的高頻考點。 今天我們將圖

前端面試之手寫一個bind方法

bind 函式對於寫react的人來說並不陌生。哦！是的，沒錯我的朋友，它的一個用處就是用來改變函式this指向的。如果細究一下bind的實現，發現裡面還是有不少東西的，我們今天展開討論一下。 在說bind之前呢，我們還要先來講講我們的老熟人 **this。今天我們再來看看它的四種

年薪百萬的技術面試都問啥？來收下這份必考題葵花寶典吧|套路

隨著各大企業紛紛佈局區塊鏈，各行業對區塊鏈人才求賢若渴，區塊鏈從業者的待遇也是水漲船高。 動輒百萬的年薪+通證激勵，不知你是否已經蠢蠢欲動。不過區塊鏈涉及的領域既多且雜，在面試中你不僅需要有牢固的知識儲備，還需要一本“面試葵花寶典”以防萬一。 話不多

web前端開發怎麼樣學習？看這份web前端學習路線

前端開發是建立Web頁面或app等前端介面呈現給使用者的過程。前端開發通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現網際網路產品的使用者介面互動。它從網頁製作演變而來，名稱上有很明顯的時代特徵。在網際網路的演化程序中，網頁製作是Web1.0時代的產物，早期網站主要內容

不知道前端課程學什麼？這份完整的web前端課程大綱分享給你

學習web前端的同學越來越多，怎麼學，從哪裡開始學可能很多同學都摸不到頭腦，那麼今天就給大家分享這份web前端課程大綱給大家，相信有了這份web前端工程師教程大綱大家能更清晰的找到自己的學習路徑。 給大家提供的這份web前端培訓課程分採用進階式學習，課程體系能夠適應市場需求、緊跟時代技術，完全滿足市場對前端