共计 1086 个字符，预计需要花费 3 分钟才能阅读完成。
通过实现链式调用来理解
链式调用是我们平常经常会用到，比如 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 的链式调用了。