说到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
;
链式编程的优点:
代码变得简洁,优雅;
链式编程的缺点:
过长的链式,会容易造成操作不明确,难以维护,不利于理解;
001-课程介绍