最近被問到這個問題，jq的鏈式呼叫原理，當時比較懵=。=，畢竟現在jq接觸的機會變很少了。

jq的鏈式呼叫

jq的鏈式呼叫其實就是比如我們在選擇dom的時候，

$('input[type="button"]')
    .eq(0).click(function() {
        alert('點選我!');
}).end().eq(1)
.click(function() {
    $('input[type="button"]:eq(0)').trigger('click');
}).end().eq(2)
.toggle(function() {
    $('.aa').hide('slow');
}, function() {
    $('.aa').show('slow');
});
 

比如如上程式碼，先選擇type型別為button的所有DOM，然後再選擇第一個...

我們自然想到每次其實就是返回選擇後的結果，在js裡面有什麼東西可以指代這個嗎？
如果你想到this就對了。

jq的方法都是掛在原型的，那麼如果我們每次在內部方法返回this，也就是返回例項物件，那麼我們就可以繼續呼叫原型上的方法了，這樣的就節省程式碼量，提高程式碼的效率，程式碼看起來更優雅。

但是也會出現一個問題：所有物件的方法返回的都是物件本身，也就是說沒有返回值，所以這種方法不一定在任何環境下都適合。

Promise的鏈式呼叫

promise的鏈式呼叫如：

function start() {  
    return new Promise((resolve, reject) => {  
      resolve('start');  
    });  
  }  
    
  start()  
    .then(data => {  
      // promise start  
      console.log('result of start: ', data);  
      return Promise.resolve(1); // p1  
    })  
    .then(data => {  
      // promise p1  
      console.log('result of p1: ', data);  
      return Promise.reject(2); // p2  
    })  
    .then(data => {  
      // promise p2  
      console.log('result of p2: ', data);  
      return Promise.resolve(3); // p3  
    })  
    .catch(ex => {  
      // promise p3  
      console.log('ex: ', ex);  
      return Promise.resolve(4); // p4  
    })  
    .then(data => {  
      // promise p4  
      console.log('result of p4: ', data);  
    });  
 

Promise的then其實都是實現了 thenable 介面，每個 then 都返回一個新的promise，除了第一個是start的例項其他的已經不是一個promise了。

reject的下面的then都會跳過(

更新，

這裡其實說錯了，應該是then 裡面的回撥被忽略執行，如果在這個then直接寫一個console.log()你發現還是會列印，感謝jjc大佬特別指出這一點的錯誤，當 Promise 的狀態為 rejected 時，這個回撥函式沒有被執行，並不是 then 函式沒有被執行。

eg:

Promise.reject(1).then(console.log('foo bar'));
 

依然輸出了 foo bar，可見 then 函式其實已經執行了。
如果寫成：

Promise.reject(1).then(() => console.log('foo bar'));

就不會輸出了。只是說，then 函式中傳入了一個回撥函式，當 Promise 的狀態為 rejected 時，這個回撥函式沒有被執行，並不是 then 函式沒有被執行。

做個合適的類比。以下 jQuery 鏈式呼叫：

$('#a_id_selector')
  .addClass('someclassname')
  .click(() => console.log('foo bar'))
  .prop('type', 'text');

執行這段程式碼，也沒有輸出 foo bar，但是我們不能說 click 函式被忽略掉了。只是裡面傳入的回撥函式的條件沒有成立，這裡是點選的條件，上面就是resolve的條件。

)，只有catch才會捕捉到。

promise的鏈式呼叫就和jq完全不一樣了，promise鏈式呼叫的特點：

關於Promise的實現，我做了一個簡單的promise：

function easyPromise(fn) {
    var that = this;
    this.then = function (cb) {
        that.cb = cb;
      }
    this.resolve = function (data) {
        that.cb(data);
    }

    fn(this.resolve);
}

new easyPromise((resolve)=>{
    setTimeout( ()=> {
        resolve("延遲執行");
    },1000);
}).then( (data) => {
    console.log(data);
} )

可以簡寫成

// 定義一個要傳給 promise 的函式，它接收一個函式（resolve）作為引數。
// resolve 的作用是在合適的時間，通知 promise 應該要執行 then 裡面的回撥函數了。
function promiseCallback (resolve) {
    setTimeout(() => {
       resolve("延時執行")
    }, 1000)
 }
 
 // 定義一個 要傳給 then 的回撥函式
 function thenCallback (data) {
     console.log(data)
 }
 
 // 例項化 promis,並分別傳入對應的回撥
 new easyPromise(promiseCallback)
 .then(thenCallback)

1.先通過 then 把 thenCallback 存起來
2.執行 promise 括號裡的函式，並把事先定義好的 resolve 函式作為引數傳給他

fn(this.resolve)

3.執行 promiseCallback 我們的邏輯就跳到 promiseCallback 函式內部去

setTimeout(() => {
  resolve("延時執行")
}, 1000)

邏輯很簡單，就是等待1秒後，執行 resolve 函式， 這個 resolve 哪來的呢？
fn(this.resolve) -> promiseCallback (resolve) -> resolve

4.執行 resolve 我們的邏輯就跳到 resolve 函式內部去

that.cb(data)

這個 that.cb 又是哪來的呢？ 就是我們第一步儲存的 then括號裡面的回撥函式，也就是 thenCallback

console.log(data)

所以就在1秒後輸出 延時執行

關於this

this是js函式執行過程中的一個物件，環境物件。

誒，自己總結的發現還是沒阮老師的好。。所以還是看阮老師的吧，連結