前言：前不久阿里远程面试时问了我一个问题，如下：
function Person(){};varperson =new Person();//实现person.set(10).get()返回20
当时正在问我原型链的问题，所以面试官直接用我写的person问的，我当时是这么实现的：
function Person(){};
var person =new Person();
person.set =function(n){
return {
get:function(){
returnn*2;
}}
}
返回结果其实也对，但set()和get()耦合太紧，不灵活。再联想一下当时正在考我原型链，且面试开始时问了我jQuery的链式操作原理（没答上来），所以感觉这题应该跟链式操作有关，于是上网查了查，确实是要用链式操作。先来看看链式操作的原理和js如何实现。
js实现链式操作
jQuery有一个十分强大的特点：链式操作。其实原理很简单，就是每次方法执行完后返回this对象，这样后面的方法就可以继续在this环境下执行。先来实现一下：
//创建一个类function Person(){};
//在原型上定义相关方法
Person.prototype ={
setName:function(){
this.name = name;
returnthis;
},
setAge:function(){
this.age = age;
returnthis;
}
}
//实例化varperson=new Person();
person.setName("Mary").setAge(20);
以上过程就实现了链式操作，而原理只是在每个方法调用后返回了this。jQuery中不用new一个实例化对象，所以可以将实例化过程封装如下：
//将实例化过程封装为一个函数
function newObj(){
returnnew Person();
}
newObj().setName("Mary").setAge(20);
此时再想想上面的那道题，就很简单了：
function Person(){};
//实现部分Person.prototype ={
set:function(value){
this.value = value;
returnthis;
},
get:function(){
returnthis.value*2;//由于要返回值，且不需要继续调用方法，所以不返回this
}
}
var person =new Person();
console.log(person.set(10).get());//20
链式操作的优缺点
首先来说说缺点。
根据上面阿里面试题的实现，我们可以看出，get方法里不能返回this，因为有值需要返回。这就是链式操作的一个局限：只能应用在不需要返回值的情况下，或者只能最后一步需要返回值。jQuery主要是对DOM元素的操作，只需要改变DOM元素的表现而不需要返回值，所以适合链式操作。
再来说说优点。
js的执行环境为单线程，为了避免阻塞，我们时常用一些异步编程方式来完成一些可能产生阻塞的操作。常见的异步编程方式包括回调函数、事件监听、ES6中的Promise对象。
链式操作实际上就是使得异步编程的流程更加清晰，不会像回调函数一样相互耦合，难以分辨函数的执行顺序且维护困难。ES6中的Promise也正是沿用了这一思想，每一个异步任务返回一个Promise对象，通过then方法指定回调函数。
网友评论