JS 链式调用 原理及实践

一、链式编码
好处
同一对象多次其属性或方法的时候，我们需要多次书写对象进行“.” 或 () 操作；链式调用是一种简化此过程的一种编码方式，使代码简洁、易读。

举个栗子（深刻不是很贴切的）：日常餐厅取餐，通常我们一次拿取想要的食物一起结账，如果每样食物要分开取餐结账估计内心的草泥马要躁动起来了。

常用场景

#jQuery的Dom操作
$('select').on('click', callback)
           .on('change', callback);

#gulp编译
gulp.src('/path/to/**.less')
    .pipe(less())
    .pipe(cssmin())

（废话不多说，切入正题…… ）

二、链式编码的原理
链式调用原理就是作用域链；实现需要做的工作；

1. 对象方法的处理 （操作方法）
2. 处理完成返回对象的引用（操作对象）
   第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;
}