用过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(); |
希望对新手有所帮助，如有不对之处欢迎留言拍砖斧正！
原文地址：http://www.css88.com/archives/4524