前言

之前有过一次面试，面试官问 promise 相关的知识点，然后我回答了，他追问说 promise 的链式怎么实现？我当时没反应过来。面试官很有耐心，说 jquery 也是有链式的，你看过 jquery 的源码吗？它的链式怎么写的？我还是不知道，后来没通过面试，这个知识点常被我回忆，现在正好有时间，来写一写

正文

答案是：返回this

先来一个例子：

var person = {
    name: 'johan',
    age: 28,
    sayName: function() {
        console.log('my name is' + this.name)
    },
    sayAge: function() {
        console.log('my age is ' + this.age)
    }
}

命名一个对象，它有两个方法，sayName 和 sayAge ，如果我想这样表示 person.sayName().sayAge() 呢？怎么做，在方法 sayName 和 sayAge 中返回 this，即

var person = {
    name: 'johan',
    age: 28,
    sayName: function() {
        console.log('my name is' + this.name)
        return this;
    },
    sayAge: function() {
        console.log('my age is ' + this.age)
        return this;
    }
}

这就是表示，调用方法 sayName 、sayAge 后，返回调用者，即例子 person.sayName() ，person 调用 sayName，调用完后返回值还是 person。所以它可以继续链式调用 sayAge，因为它表示的还是 person

Promise 中的链式

Promise 本身没有链式，但是 Promise 的实例对象中的 then 有链式

function MyPromise(executor) {
    
}

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
        ...
    })
}

当你使用 Promise 时，一般是这样使用：

let promise = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000)
})
promise.then(() => {
    console.log('1s后显示')
})

如果加上链式

promise.then(() => {
    console.log('1s后显示,第一个')
}).then(() => {
    console.log('1s后显示，第二个')
})

所以很明显，每调用一次 then，就是返回一个实例对象（return new Promise ）

Jquery 中的链式

源码太多内容，就拿 core.js 中的代码为例子

jQuery.fn = jQuery.prototype = {

 // The current version of jQuery being used
 jquery: version,

 constructor: jQuery,

 // The default length of a jQuery object is 0
 length: 0,

 toArray: function() {
  return slice.call( this );
 },

 // Get the Nth element in the matched element set OR
 // Get the whole matched element set as a clean array
 get: function( num ) {

  // Return all the elements in a clean array
  if ( num == null ) {
   return slice.call( this );
  }

  // Return just the one element from the set
  return num < 0 ? this[ num + this.length ] : this[ num ];
 },

 // Take an array of elements and push it onto the stack
 // (returning the new matched element set)
 pushStack: function( elems ) {

  // Build a new jQuery matched element set
  var ret = jQuery.merge( this.constructor(), elems );

  // Add the old object onto the stack (as a reference)
  ret.prevObject = this;

  // Return the newly-formed element set
  return ret;
 },

 // Execute a callback for every element in the matched set.
 each: function( callback ) {
  return jQuery.each( this, callback );
 },

 map: function( callback ) {
  return this.pushStack( jQuery.map( this, function( elem, i ) {
   return callback.call( elem, i, elem );
  } ) );
 },

 slice: function() {
  return this.pushStack( slice.apply( this, arguments ) );
 },

 first: function() {
  return this.eq( 0 );
 },

 last: function() {
  return this.eq( -1 );
 },

 even: function() {
  return this.pushStack( jQuery.grep( this, function( _elem, i ) {
   return ( i + 1 ) % 2;
  } ) );
 },

 odd: function() {
  return this.pushStack( jQuery.grep( this, function( _elem, i ) {
   return i % 2;
  } ) );
 },

 eq: function( i ) {
  var len = this.length,
   j = +i + ( i < 0 ? len : 0 );
  return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
 },

 end: function() {
  return this.prevObject || this.constructor();
 }
};

我们不用看全部，但看其中的方法，是不是和最开始的例子很像——return this

所以链式不可怕，可怕的是，动都不动就自我劝退