javaScripte鏈式調用

通過實現鏈式調用來理解

   鏈式調用是我們平常經常會用到，比如JQuery中的$('id').eq(0), 還有lodash中的_.chain().push()。 這些都是平常會用到的，但是都是已經封裝好的，我們知道用起來很方便卻不知道實現的原理是什麼。
   其實呢它並沒有很神祕，只不過是一種語法招數，它能讓你通過重用一個初始操作來達到用少量代碼表達複雜操作的目的。

通過例子來分析鏈式調用

  其實鏈式調用就是讓一個類的每個方法都返回this值，從而達到鏈式調用
  首先創建一個構造函數,把那些元素作爲數組保存在一個實例屬性中，並把所有定義在構造器函數的 prototype屬性指向對象中的方法都返回用以調用方法的那個實例的引用，那麼它就具有了進行鏈式調用的能力
我們來看一下這段例子

 $('div')
      .eq(0)
      .css('width', '200px')
      .show();

這其實就是一段簡單JQuery代碼，選擇第一個div設置css樣式，然後將它顯示出來。

    function JQuery(selector) {
      this.elements = document.querySelectorAll(selector);
    }
    
    JQuery.prototype = {
      eq: function(index) {
        this.elements = [this.elements[index]]
        return this;
      },
      css: function(prop, value) {
        this.elements.forEach(function(el) {
          // 動態設置屬性
          el.style[prop] = value;
        })
        return this;
      },
      show: function() {
        this.css('display', 'block')
        return this;
      },
    }

這段代碼很明顯在prototype上的三個函數都返回了this，在函數中實現對應的功能也是直接使用this來獲取值，然後修改this中的值再返回this，這樣在下次調用的時候還是JQuery對象，從而實現了鏈式調用。
  既然函數都是在原型鏈上，那麼肯定需要創建一個對象才能去調用函數吧，而我們並沒看到new JQuery，而且也沒有看見$符號，那怎麼才能使用呢。

window.$ = function(selector) {
  return new JQuery(selector);
}
$('div')
  .eq(0)
  .css('width', '200px')
  .show();

直接用一個匿名函數返回一個new JQuery()的對象，然後賦值給$並掛載到全局上，這樣就實現了一個JQuery的鏈式調用了。