javaScript鏈式調用

經過實現鏈式調用來理解

   鏈式調用是咱們日常常常會用到，好比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的鏈式調用了。