链式调用我们平常用到很多，比如jQuery中的$(ele).show().find(child).hide()，再比如angularjs中的$http.get(url).success(fn_s).error(fn_e)。但这都是已经包装好的链式调用，我们只能体会链式调用带来的方便，却不知道形成这样一条函数链的原理是什么。
随着链式调用的普及，实现的方案也越来越多。最常见的，是jQuery直接返回this的方式，underscore的可选式的方式，和lodash惰性求值的方式。我们分别来了解，并逐个完成它们的demo。
我们从最简单的开始，直接返回this是最常见的方式，也是所有方式的基础。我们实现一个简单的链式运算类，首先它得有个字段保留结果。
function A(num) {
this.value = num || 0; //不做传参校验了
}
然后添加进行运算并返回this的方法。
A.prototype.add = function(a) {this.value += a; return this;}
A.prototype.reduce = function(a) {this.value -= a; return this;}
最后为了显示正常修改两个继承的方法。
A.prototype.valueOf = function() {return this.value;}
A.prototype.toString = function() {return this.value + ‘‘;}
进行验证。
var a = new A(2); alert(a.add(1).reduce(2))
这个demo应该简单到不用对任何代码进行说明，我们快速来到第二个，就是underscore中用到chain。underscore规定了两种调用方式，_.forEach(arr, fn);_.map(arr, fn);和_.chain(arr).forEach(fn).map(fn)。
我们先实现前面一种调用方式，因为这里不是讲解underscore，所以我们只是简单实现forEach和map的功能，不对对象而仅对数组进行处理。
var _ = {};
_.forEach = function(array, fn) {
array.forEach(function(v, i, array) {
fn.apply(v, [v, i, array]);
})
};
_.map = function(array, fn) {
return array.map(function(v, i, array) {
return fn.apply(v, [v, i, array]);
})
};
上面的代码很简单，直接调用ES5中数组原型的方法。接下来问题就来了，要实现链式调用，我们首先要做什么？我们看到第二种调用方式中，所有的操作无论是forEach还是map都是在_.chain(arr)上调用的，所以_.chain(arr)应该是返回了一个对象，这个对象上有和_上相同的方法，只是实现上传参由2个变成了1个，因为原来的第一个参数永远是_.chain中传入的参数的拷贝。
好了，确定_.chain(arr)要返回一个对象了，那这个对象的构造函数怎么写呢？我们借用一个现成的变量来保存这个构造函数，就是_。函数也是对象，所以当_由对象变成函数，不会影响原来的逻辑，而这个函数要传入一个array，并返回一个新的对象。所以上面的代码应该改成这样。
var _ = function(array) {
this._value = Array.prototype.slice.apply(array);
}
_.forEach = function(array, fn) {
array.forEach(function(v, i, array) {
fn.apply(v, [v, i, array]);
})
};
_.map = function(array, fn) {
return array.map(function(v, i, array) {
return fn.apply(v, [v, i, array]);
})
};
_.chain = function(array) {
return new _(array);
}
新的构造函数有了，但它生成的对象除了_value就是一片空白，我们要怎么把原本_上的方法稍加修改的移植到_生成的对象上呢？代码如下：
for(var i in _) { //首先我们要遍历_
if(i !== ‘chain‘) { //然后要去除chain
_.prototype[i] = (function(i) { //把其他的方法都经过处理赋给_.prototype
return function() { //i是全局变量，我们要通过闭包转化为局部变量
var args = Array.prototype.slice.apply(arguments); //取出新方法的参数，其实就fn一个
args.unshift(this._value); //把_value放入参数数组的第一位
if(i === ‘map‘) { //当方法是map的时候，需要修改_value的值
this._value = _[i].apply(this, args);
}else { //当方法是forEach的时候，不需要修改_value的值
_[i].apply(this, args);
}
return this;
}
})(i);
}
}
最后我们模仿underscore使用value返回当前的_value。
_.prototype.value = function() {
return this._value;
}
进行验证。
var a = [1, 2, 3];
_.forEach(a, function(v){console.log(v);})
alert(_.map(a, function(v){return ++v;}))
alert(_.chain(a).map(function(v){return ++v;}).forEach(function(v){console.log(v);}).value())
以上是underscore中用到的链式调用的简化版，应该不难理解。那最复杂的来了，lodash惰性调用又是怎样的呢？首先我来解释下什么是惰性调用，比如上面的_.chain(arr).forEach(fn).map(fn).value()，当执行到chain(arr)的时候，返回了一个对象，执行到forEach的时候开始轮询，轮询完再返回这个对象，执行到map的时候再次开始轮询，轮询完又返回这个对象，最后执行到value，返回对象中_value的值。其中每一步都是独立的，依次进行的。而惰性调用就是，执行到forEach的时候不执行轮询的操作，而是把这个操作塞进队列，执行到map的时候，再把map的操作塞进队列。那什么时候执行呢？当某个特定的操作塞进队列的时候开始执行之前队列中所有的操作，比如当value被调用时，开始执行forEach、map和value。
惰性调用有什么好处呢，为什么把一堆操作塞在一起反倒是更优秀的方案的？我们看传统的链式操作都是这样的格式，obj.job1().job2().job3()，没错整个函数链都是job链，如果这时候有一个简单的需求，比如连续执行100遍job1-3，那么我们就要写100遍，或者用for把整个链条断开100次。所以传统链式操作的缺点很明显，函数链中都是job，不存在controller。而一旦加上controller，比如上面的需求我们用简单的惰性调用来实现，那就是obj.loop(100).job1().job2().job3().end().done()。其中loop是声明开启100次循环，end是结束当前这次循环，done是开始执行任务的标志，代码多么简单！
现在我们实现一下惰性链式调用，由于lodash就是underscore的威力加强版，大体架构都差不多，而上面已经有underscore的基本链式实现，所以我们脱离lodash和underscore的其他代码，仅仅实现一个类似的惰性调用的demo。
首先我们要有一个构造函数，生成可供链式调用的对象。之前提到的，任何controller或者job的调用都是把它塞入任务队列，那么这个构造函数自然要有一个队列属性。有了队列，肯定要有索引指明当前执行的任务，所以要有队列索引。那么这个构造函数暂时就这样了
function Task() {
this.queen = []; this.queenIndex = 0;
}
如果我们要实现loop，那么还要有个loop的总次数和当前loop的次数，而如果一次loop结束，我们要回到任务队列哪里呢？所以还要有个属性记录loop开始的地方。构造函数最终的形态如此：
function Task() {
this.queen = [];
this.queenIndex = 0;
this.loopCount = 0;
this.loopIndex = 0;
this.loopStart = 0;
}
现在我们开始实现controller和job，比如上面这个例子中说到的：job()、loop()、end()、done()。它们应该都包含两种形态，一种是本来的业务逻辑，比如job的业务就是do something，而loop的控制逻辑就是记录loopCount和loopStart，end的控制逻辑就是loopIndex+1和检查loopIndex看是否需要回到loopStart的位置再次遍历。而另一种形态是不管业务逻辑是什么，把业务逻辑对应的代码统一塞进任务队列，这种形态可以称之为第一种形态的包装器。
如果我们最终的调用格式是new Task().loop(100).job().end().done()，那么方法链上的方法肯定是包装器，这些方法自然应该放在Task.prototype上，那第一种形态的方法何去何从呢？那就放在Task.prototype.__proto__上吧。我们这样写
var _task_proto = {
loop: function(num) {
this.loopStart = this.queenIndex;
this.loopCount = num;
},
job: function(str) {
console.log(str);
},
end: function() {
this.loopIndex++;
if(this.loopIndex < this.loopCount) {
this.queenIndex = this.loopStart;
}else {
this.loopIndex = 0;
}
},
done: function() {
console.log(‘done‘);
}
};
Task.prototype.__proto__ = _task_proto;
然后在遍历_task_proto在Task.prototype上生成包装器，并让每个包装器返回this以供链式调用（看见没，其实每一种链式调用的方式都要这么做）
for(var i in _task_proto) {
(function(i) {
var raw = Task.prototype[i];
Task.prototype[i] = function() {
this.queen.push({
name: i,
fn: raw,
args: arguments
}); //保存具体的实现方法、名字和参数到任务队列 return this;
};
})(i);
}
现在问题来了，我们什么时候开始执行具体的任务，又怎样让任务有条不紊的执行和跳转呢？这时候我们要在Task.prototype上定义一个新的方法，这个方法专门用来控制任务的执行的，因为任务队列是依次执行并由索引定位的，跟迭代器有那么一点相像，我们定义这个新的方法叫next
Task.prototype.next = function() {
var task = this.queen[this.queenIndex]; //取出新的任务
task.fn.apply(this, task.args); //执行任务中指向的具体的实现方法，并传入之前保存的参数
if(task.name !== ‘done‘) {
this.queenIndex++;
this.next(); //如果没执行完，任务索引+1并再次调用next
}else {
this.queen = [];
this.queenIndex = 0; //如果执行完了，清空任务队列，重置任务索引
}
}
添加了next，我们需要在done的包装器上加点东西以便让任务队列开始执行，修改之前生成包装器的代码
for(var i in _task_proto) {
(function(i) {
var raw = Task.prototype[i];
Task.prototype[i] = function() {
this.queen.push({
name: i,
fn: raw,
args: arguments
}); //保存具体的实现方法、名字和参数到任务队列
if(i === ‘done‘) {
this.next();
}
return this;
};
})(i);
}
最后我们进行验证。
var t = new Task(); console.log(‘1‘) t.job(‘fuck‘).loop(3).job(‘world‘).end().loop(3).job(‘world‘).end().job(‘!‘).done(); console.log(‘2‘) t.job(‘fuck‘).loop(3).job(‘world‘).job(‘!‘).end().done(); console.log(‘3‘) t.job(‘fuck‘).loop(3).job(‘world‘).job(‘!‘).end().job(‘!‘);
好了，链式调用玩到这里了。这几个demo尤其是惰性调用稍加改造后，功能可以大大加强，但是这里就不再讨论了。