在使用jQuery库的时候,是可以连续调用多个方法的,这是怎么实现的呢?如:
$("div").width("100px").height("100px");
1、实现原理:
这里使用原生js来模拟这样的效果:
let fun = {
fun1: function() {
console.log("fun1");
return this;
},
fun2: function() {
console.log("fun2");
return this;
},
fun3: function() {
console.log("fun3");
return this;
}
}
fun.fun1().fun2().fun3();
这样就可以连续的输出字符串的fun1、fun2、fun3 了,原因是在每个方法后面加了一个return this。
如果没有加上return this语句的话,那么执行完一个函数之后,会默认返回undefined,这个是js内部自己隐式添加的。返回undefined的时候,再调用另一个方法肯定就会报错,因为undefined是没有方法的。
2、为什么要返回this?
因为在一个对象里面,this指向的是对象本身,而我们连续调用方法的时候,这些方法都是在对象内部定义的,所以this是可以访问到这些方法。