一、链式编码
好处
同一对象多次其属性或方法的时候，我们需要多次书写对象进行“.” 或 () 操作；链式调用是一种简化此过程的一种编码方式，使代码简洁、易读。
举个栗子（深刻不是很贴切的）：日常餐厅取餐，通常我们一次拿取想要的食物一起结账，如果每样食物要分开取餐结账估计内心的草泥马要躁动起来了。
常用场景
#jQuery的Dom操作
$('select').on('click', callback)
.on('change', callback);#gulp编译
gulp.src('/path/to/**.less')
.pipe(less())
.pipe(cssmin())（废话不多说，切入正题…… ）
二、链式编码的原理
链式调用原理就是作用域链；实现需要做的工作；
- 对象方法的处理 （操作方法）
- 处理完成返回对象的引用（操作对象）
第2步链式实现的方式：
<1> this的作用域链，jQuery的实现方式；【示例1】
<2> 返回对象本身, 同this的区别就是显示返回链式对象；【示例2】
<3> 闭包返回对象通过调用覆盖valueOf方法实现，副作用获取结果需要调用valueOf;（此种方法适用于操作方法有相互依赖的情况下使用）【示例3】
示例1 根据一个人的年龄获取其年龄段 在线效果
person.set(10).get(); // 我还是个少年var Person = function() {};
Person.prototype.set = function (age){
this.age = 10;
return this; //this调用位置决定其词法作用域
}
Person.prototype.get = function (){
var age = this.age;
if(age < 6){
return '我还是个宝宝';
}else if(age < 18){
return '我还是个少年';
}else{
//……
}
}
var person = new Person();
person.set(10).get(); // '我还是个少年'
示例2 示例1的实现 在线效果
var person = {
set: function (age){
this.age = 10; //this调用位置决定其词法作用域
return person;
},
get: function (){
var age = this.age;
if(age < 6){
return '我还是个宝宝';
}else if(age < 18){
return '我还是个少年';
}else{
//……
}
}
} 示例3 实现词语接龙游戏拼接，依赖上次的拼接结果 胸有成竹 -> 竹报平安 -> 安富尊荣 在线效果
wordschain('胸有成竹')('竹报平安')('安富尊荣').valueOf()function wordschain(word){
var words = word;
function chain(word){
words += ' -> ' + word;
return chain; //操作对象本身
}
// valueOf 对象原始值chain [了解更多][5]
chain.valueOf = function(){
return words;
}
return chain;
}实现方法
1.方法体内返回对象实例自身(this)
var Obj = {
a: 1,
func: function(){
this.a += 1;
return this
}
}
Obj.func().func();
console.log(Obj.a); //3
2.对象传入后每次调用返回函数自身
function show(str) {
console.log(str);
return show;
}
show(123)(456)(789);
// 控制台打印结果
// 123
// 456
// 789
简单的链式调用
function person() {
this.run = function () {
console.log("跑了");
return this;
};
this.eat = function () {
console.log("吃了");
return this;
}
}
var p = new person();
p.run().eat();