技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> JavaScript --> javascript实现简单的链式调用

javascript实现简单的链式调用

浏览:886次  出处信息

用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻，貌似现在很多库都支持了方法的链式调用,比如YUI3等。链式调用是一个非常不错的语法特性，能让代码更加简洁、易读。很多时候链式调用可以避免多次重复使用一个对象变量。今天有人在群里说起javascript链式调用，写了几个简单的实现方式共大家参考一下：
一般我们我用函数构造一个类，例如：

view source
print?
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类，并具备几个简单的方法

view source
print?
1 var dog1= new Dog("旺旺",3);
2 dog1.getName();
3 dog1.getAge();

实例化，并且调用方法。

要实现链式调用是非常简单的事情，唯一需要做的就是在每个方法后面返回this。例如：

view source
print?
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初始化，还是有点不方便。在改进一下：

view source
print?
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，在改进一下：

view source
print?
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();

这里在构造函数中加了这么一句：

view source
print?
1 if(!(this instanceof Dog)){
2      return new Dog(name,age);
3 }

判断this是否为Dog实例，如果不是就创建一个新实例。

更为安全代码：

view source
print?
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();

或者：

view source
print?
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();

希望对新手有所帮助，如有不对之处欢迎留言拍砖斧正！

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：渐进增强的无刷新多图片上传控件(iFrame+HTML5)
后一篇：Object类相关的属性，方法和操作符 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1