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的链式调用了。