关闭

javascript实现简单的链式调用

标签: javascriptfunctionjqueryyui
280人阅读 评论(0) 收藏 举报
分类:

用过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