用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻,貌似现在很多库都支持了方法的链式调用,比如YUI3等。链式调用是一个非常不错的语法特性,能让代码更加简洁、易读。很多时候链式调用可以避免多次重复使用一个对象变量。今天有人在群里说起javascript链式调用,写了几个简单的实现方式共大家参考一下:
一般我们我用函数构造一个类,例如:
01 | var function Dog(name,age){ |
02 | this .name = name; |
03 | this .age = age; |
04 | }; |
05 | Dog.prototype={ |
06 | getName: function (){ |
07 | console.log( this .name); |
08 | }, |
09 | getAge: function (){ |
10 | console.log( this .age); |
11 | } |
12 | }; |
定义一个Dog类,并具备几个简单的方法
1 | var dog1= new Dog( "旺旺" ,3); |
2 | dog1.getName(); |
3 | dog1.getAge(); |
实例化,并且调用方法。
要实现链式调用是非常简单的事情,唯一需要做的就是在每个方法后面返回this。例如:
01 | var Dog= function (name,age){ |
02 | this .name = name; |
03 | this .age = age; |
04 | }; |
05 | Dog.prototype={ |
06 | getName: function (){ |
07 | console.log( this .name); |
08 | return this ; |
09 | }, |
10 | getAge: function (){ |
11 | console.log( this .age); |
12 | return this ; |
13 | } |
14 | }; |
15 |
16 | var dog1= new Dog( "旺旺" ,3); |
17 | dog1.getName().getAge(); |
上面的代码可以看出,Dog方法上多了一段代码:return this;
细心一点你会发现这里dog1实例前还需要一个new初始化,还是有点不方便。在改进一下:
01 | var Dog= function (name,age){ |
02 | this .name = name; |
03 | this .age = age; |
04 | }; |
05 | Dog.prototype={ |
06 | getName: function (){ |
07 | console.log( this .name); |
08 | return this ; |
09 | }, |
10 | getAge: function (){ |
11 | console.log( this .age); |
12 | return this ; |
13 | } |
14 | }; |
15 | window.Dogs= function (name,age){ |
16 | return new Dog(name,age); |
17 | }; |
18 | Dogs( "旺旺" ,3).getName().getAge(); |
这里在window下定义一个Dogs方法,作为Dog的别名,这样就可以直接用Dogs(“旺旺”,3).getName().getAge();这样调用了。
苛刻的网友说这样太暴露了,这样有两个全局变量变量Dog和Dogs,在改进一下:
01 | var Dog= function (name,age){ |
02 | if (!( this instanceof Dog)){ |
03 | return new Dog(name,age); |
04 | } |
05 | this .name = name; |
06 | this .age = age; |
07 | }; |
08 | Dog.prototype={ |
09 | getName: function (){ |
10 | console.log( this .name); |
11 | return this ; |
12 | }, |
13 | getAge: function (){ |
14 | console.log( this .age); |
15 | return this ; |
16 | } |
17 | }; |
18 | Dog( "旺旺" ,3).getName().getAge(); |
这里在构造函数中加了这么一句:
1 | if (!( this instanceof Dog)){ |
2 | return new Dog(name,age); |
3 | } |
判断this是否为Dog实例,如果不是就创建一个新实例。
更为安全代码:
01 | ( function (){ |
02 | var Dog= function (name,age){ |
03 | if (!( this instanceof Dog)){ |
04 | return new Dog(name,age); |
05 | } |
06 | this .name = name; |
07 | this .age = age; |
08 | }; |
09 | Dog.prototype={ |
10 | getName: function (){ |
11 | console.log( this .name); |
12 | return this ; |
13 | }, |
14 | getAge: function (){ |
15 | console.log( this .age); |
16 | return this ; |
17 | } |
18 | }; |
19 | return (window.Dog=Dog); |
20 | })(); |
21 | Dog( "旺旺" ,3).getName().getAge(); |
或者:
01 | ( function (){ |
02 | var Dog= function (name,age){ |
03 | this .name = name; |
04 | this .age = age; |
05 | }; |
06 | Dog.prototype={ |
07 | getName: function (){ |
08 | console.log( this .name); |
09 | return this ; |
10 | }, |
11 | getAge: function (){ |
12 | console.log( this .age); |
13 | return this ; |
14 | } |
15 | }; |
16 | window.Dogs= function (name,age){ |
17 | return new Dog(name,age); |
18 | }; |
19 | })(); |
20 |
21 | Dogs( "旺旺" ,3).getName().getAge(); |
希望对新手有所帮助,如有不对之处欢迎留言拍砖斧正!