javascript实现简单的链式调用

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

viewsource

print
?

01	varfunctionDog(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类，并具备几个简单的方法

viewsource

print
?

1	vardog1=newDog("旺旺",3);

2	dog1.getName();

3	dog1.getAge();

实例化，并且调用方法。

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

viewsource

print
?

01	varDog=function(name,age){

02	this.name=name;

03	this.age=age;

04

};

05	Dog.prototype={

06	getName:function(){

07	console.log(this.name);

08	returnthis;

09

},

10	getAge:function(){

11	console.log(this.age);

12	returnthis;

13

}

14

};

15

16	vardog1=newDog("旺旺",3);

17	dog1.getName().getAge();

上面的代码可以看出，Dog方法上多了一段代码：returnthis;
细心一点你会发现这里dog1实例前还需要一个new初始化，还是有点不方便。在改进一下：

viewsource

print
?

01	varDog=function(name,age){

02	this.name=name;

03	this.age=age;

04

};

05	Dog.prototype={

06	getName:function(){

07	console.log(this.name);

08	returnthis;

09

},

10	getAge:function(){

11	console.log(this.age);

12	returnthis;

13

}

14

};

15	window.Dogs=function(name,age){

16	returnnewDog(name,age);

17

};

18	Dogs("旺旺",3).getName().getAge();

这里在window下定义一个Dogs方法，作为Dog的别名，这样就可以直接用Dogs(“旺旺”,3).getName().getAge();这样调用了。
苛刻的网友说这样太暴露了，这样有两个全局变量变量Dog和Dogs，在改进一下：

viewsource

print
?

01	varDog=function(name,age){

02	if(!(thisinstanceofDog)){

03	returnnewDog(name,age);

04

}

05	this.name=name;

06	this.age=age;

07

};

08	Dog.prototype={

09	getName:function(){

10	console.log(this.name);

11	returnthis;

12

},

13	getAge:function(){

14	console.log(this.age);

15	returnthis;

16

}

17

};

18	Dog("旺旺",3).getName().getAge();

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

viewsource

print
?

1	if(!(thisinstanceofDog)){

2	returnnewDog(name,age);

3

}

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

更为安全代码：

viewsource

print
?

01	(function(){

02	varDog=function(name,age){

03	if(!(thisinstanceofDog)){

04	returnnewDog(name,age);

05

}

06	this.name=name;

07	this.age=age;

08

};

09	Dog.prototype={

10	getName:function(){

11	console.log(this.name);

12	returnthis;

13

},

14	getAge:function(){

15	console.log(this.age);

16	returnthis;

17

}

18

};

19	return(window.Dog=Dog);

20

})();

21	Dog("旺旺",3).getName().getAge();

或者：

viewsource

print
?

01	(function(){

02	varDog=function(name,age){

03	this.name=name;

04	this.age=age;

05

};

06	Dog.prototype={

07	getName:function(){

08	console.log(this.name);

09	returnthis;

10

},

11	getAge:function(){

12	console.log(this.age);

13	returnthis;

14

}

15

};

16	window.Dogs=function(name,age){

17	returnnewDog(name,age);

18

};

19

})();

20

21	Dogs("旺旺",3).getName().getAge();

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