JavaScript中的链式操作

阅读本文，要求熟悉JQ并具备一定的JS基本功，对原型有所了解。

说到javascript的链式编程,相信很多前端开发者就不由大脑的想到jquery的链式操作.

很多人最早开始接触链式操作，就是从这开始的。

实例代码一:

[code]$(".box").height(200).width(200);

这段代码就是给一个类名称为.box的元素 设置高度,又设置宽度;

实例代码二:

[code]$(".box").height().width();

实例代码二运行后结果如下:

报错了，说 width 不是一个函数, 这是为什么呢?

明明jquery中有这width这个方法啊

实际上JQ大致原理是这样的：

[code]//以下为原理说明，非JQ源码

function $(){
var obj = 封装...
return obj;
}
$.prototype.width = function(val){
if(val){
修改宽度...
return this;  //当函数有参时，操作完成，返回JQ对象本身
} else {
return 宽度;  //当函数无参时，则返回宽度（number类型）
}
}
$.prototype.height = function(val){
if(val){
修改高度...
return this;  //当函数有参时，操作完成，返回JQ对象本身
} else {
return 高度;  //当函数无参时，则返回高度（number类型）
}
}

回到代码实例一当中，过程如下图所示：

在实例代码二中，height()方法是获取元素的高度，它会返回元素的高度，是一个数字。

我们无法对着一个数字调用方法，因此链式调用就中断了，过程如下图：

总结:

jquery的链式编程,一般用于设置操作,不能会用于获取操作;
因为设置操作不必返回设置后的结果,而获取必须返回具体的值;

链式调用的核心，就是函数在执行完成后，返回了this，即当前对象

接下来,我们自己用javascript来练习一下

[code]function Person(){
this.age=20;//默认值为20;
}

//通过原型给 Person构造函数上添加一个设置年龄的方法
Person.prototype.setAge=function(num){
this.age=num;
}

//通过原型给 Person构造函数上添加一个获取年龄的方法
Person.prototype.getAge=function(){
return this.age;
}

链式调用

[code]console.log(new Person().setAge(30).getAge()); //报错

错误提示:没有getAge属性

我们又把上面的Person构造函数代码改动一下 加上

retrun this

[code]//通过原型给 Person构造函数上添加一个设置年龄的方法
Person.prototype.setAge=function(num){
this.age=num;
return this;
}

再次运行

[code]console.log(new Person().setAge(30).getAge()); //30

再次总结

javascript的链式编程的核心就是 

return this

链式编程的优点:

代码变得简洁,优雅;

链式编程的缺点:

过长的链式,会容易造成操作不明确，难以维护,不利于理解;