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