javascript中的链式操作

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

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

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

实例代码一:

$(\".box\").height(200).width(200);

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

$(\".box\").height().width();

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

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

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

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

//以下为原理说明，非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来练习一下

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

链式调用

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

错误提示:没有getAge属性

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

retrun this

;

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

再次运行

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

再次总结
javascript的链式编程的核心就是

return this

;
链式编程的优点:

代码变得简洁,优雅;

链式编程的缺点:

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