JavaScript 面向?qū)ο笕腴T精簡篇第2/2頁
更新時(shí)間：2009年03月21日 16:37:29 作者：
圍繞面向?qū)ο蟮膸状箨P(guān)鍵字：封裝 ，繼承 ，多態(tài) ，展開JavaScript面向?qū)ο?/div>
C.摻元類： 把一些常用通用性比較大的方法統(tǒng)一封裝在一個(gè)函數(shù)中，然后通過下面這個(gè)函數(shù)分派給要用到這些方法的類．還可以針對(duì)不同的類，選擇性的傳遞需要的方法。
<script type="text/javascript">
function agument(receveClass,giveClass){
if(arguments[2]){
var len = arguments.length;
for(i=2;i<len;i++){
receveClass.prototype[arguments[i]] = giveClass.prototype[arguments[i]];
}
}
else{
for(method in giveClass.prototype){
if(!receveClass.prototype[method]){
receveClass.prototype[method] = giveClass.prototype[method];
}
}
}
};
var Name = function(){};
Name.prototype ={
sayLike:function(){
alert("i like oldfish");
},
sayLove:function(){
alert("i love oldfish");
}
}
var Fish = function(){};
var ioldFish = new Fish();
agument(Fish,Name,"sayLove");
ioldFish.sayLove();
ioldFish.sayLike();
</script>
多態(tài) ：個(gè)人覺得這個(gè)比較抽象，很難言傳，所以下面就從重載和覆蓋兩個(gè)方面來簡單闡述一下。
重載 ：上面這個(gè)例子中agument函數(shù)初始帶了兩個(gè)參數(shù)，但是在后面的調(diào)用中，agument(Fish,Name,”sayLove”)同樣可以帶入任意多個(gè)參數(shù)，javascript的重載，是在函數(shù)中由用戶自己通過操作arguments這個(gè)屬性來實(shí)現(xiàn)的。
覆蓋 ：這個(gè)很簡單，就是子類中定義的方法如果與從超類中繼承過來的的方法同名，就覆蓋這個(gè)方法（這里并不是覆蓋超類中的方法，注意一下），這里就不累贅了！
最后重點(diǎn)著墨說一下this和執(zhí)行上下文 ，在前面舉的封裝例子中，this都是表示this所在的類的實(shí)例化對(duì)象本身，但是并不是千篇一律的，打個(gè)比方，通過HTML屬性定義的事件處理代碼，見如下代碼：
<script type="text/javascript">
var Name = function(name) {
this.name = name;
this.getName = function () {
alert(this.name);
}
};
var ioldFish = new Name("老魚"),
btn = document.getElementById('btn');
btn.onclick = ioldFish.getName;
//btn.onclick = function(){ioldFish.getName.call(ioldFish)};
</script>
上例中點(diǎn)了按鈕以后彈出框里并沒有顯示出實(shí)例對(duì)象的屬性，這是因?yàn)閠his的執(zhí)行上下文已經(jīng)改變了，他現(xiàn)在所在的上下文應(yīng)該是input這個(gè) HTML標(biāo)簽，但是該標(biāo)簽又不存在getName這個(gè)屬性，所以自然無法輸出這個(gè)屬性的屬性值了！從這個(gè)例子我們不難看出：執(zhí)行上下文是在執(zhí)行時(shí)才確定的，它隨時(shí)可以變。
當(dāng)然你可以去掉上面我注釋掉的那段代碼，通過call改變this的執(zhí)行上下文，從而獲取getName方法。apply方法同樣可以實(shí)現(xiàn)改變執(zhí)行上下文的功能，不過在prototype框架中發(fā)現(xiàn)了一個(gè)更為優(yōu)美的實(shí)現(xiàn)方法bind?？匆幌逻@個(gè)方法的實(shí)現(xiàn)吧，不得不感嘆先人的偉大……
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply(obj, arguments);
};
}
相信如果能看明白的話，您已經(jīng)可以靠這些知識(shí)點(diǎn)，去寫一個(gè)簡單的腳本框架了，多多實(shí)踐，相信不久的將來就能高手進(jìn)級(jí)了
C.摻元類： 把一些常用通用性比較大的方法統(tǒng)一封裝在一個(gè)函數(shù)中，然后通過下面這個(gè)函數(shù)分派給要用到這些方法的類．還可以針對(duì)不同的類，選擇性的傳遞需要的方法。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function agument(receveClass,giveClass){
if(arguments[2]){
var len = arguments.length;
for(i=2;i<len;i++){
receveClass.prototype[arguments[i]] = giveClass.prototype[arguments[i]];
}
}
else{
for(method in giveClass.prototype){
if(!receveClass.prototype[method]){
receveClass.prototype[method] = giveClass.prototype[method];
}
}
}
};
var Name = function(){};
Name.prototype ={
sayLike:function(){
alert("i like oldfish");
},
sayLove:function(){
alert("i love oldfish");
}
}
var Fish = function(){};
var ioldFish = new Fish();
agument(Fish,Name,"sayLove");
ioldFish.sayLove();
ioldFish.sayLike();
</script>
多態(tài) ：個(gè)人覺得這個(gè)比較抽象，很難言傳，所以下面就從重載和覆蓋兩個(gè)方面來簡單闡述一下。
重載 ：上面這個(gè)例子中agument函數(shù)初始帶了兩個(gè)參數(shù)，但是在后面的調(diào)用中，agument(Fish,Name,”sayLove”)同樣可以帶入任意多個(gè)參數(shù)，javascript的重載，是在函數(shù)中由用戶自己通過操作arguments這個(gè)屬性來實(shí)現(xiàn)的。
覆蓋 ：這個(gè)很簡單，就是子類中定義的方法如果與從超類中繼承過來的的方法同名，就覆蓋這個(gè)方法（這里并不是覆蓋超類中的方法，注意一下），這里就不累贅了！
最后重點(diǎn)著墨說一下this和執(zhí)行上下文 ，在前面舉的封裝例子中，this都是表示this所在的類的實(shí)例化對(duì)象本身，但是并不是千篇一律的，打個(gè)比方，通過HTML屬性定義的事件處理代碼，見如下代碼：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var Name = function(name) {
this.name = name;
this.getName = function () {
alert(this.name);
}
};
var ioldFish = new Name("老魚"),
btn = document.getElementById('btn');
btn.onclick = ioldFish.getName;
//btn.onclick = function(){ioldFish.getName.call(ioldFish)};
</script>
上例中點(diǎn)了按鈕以后彈出框里并沒有顯示出實(shí)例對(duì)象的屬性，這是因?yàn)閠his的執(zhí)行上下文已經(jīng)改變了，他現(xiàn)在所在的上下文應(yīng)該是input這個(gè) HTML標(biāo)簽，但是該標(biāo)簽又不存在getName這個(gè)屬性，所以自然無法輸出這個(gè)屬性的屬性值了！從這個(gè)例子我們不難看出：執(zhí)行上下文是在執(zhí)行時(shí)才確定的，它隨時(shí)可以變。
當(dāng)然你可以去掉上面我注釋掉的那段代碼，通過call改變this的執(zhí)行上下文，從而獲取getName方法。apply方法同樣可以實(shí)現(xiàn)改變執(zhí)行上下文的功能，不過在prototype框架中發(fā)現(xiàn)了一個(gè)更為優(yōu)美的實(shí)現(xiàn)方法bind?？匆幌逻@個(gè)方法的實(shí)現(xiàn)吧，不得不感嘆先人的偉大……
復(fù)制代碼 代碼如下:
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply(obj, arguments);
};
}
相信如果能看明白的話，您已經(jīng)可以靠這些知識(shí)點(diǎn)，去寫一個(gè)簡單的腳本框架了，多多實(shí)踐，相信不久的將來就能高手進(jìn)級(jí)了
相關(guān)文章
Javascript面向?qū)ο笤O(shè)計(jì)一 工廠模式
工廠模式抽象了創(chuàng)建具體對(duì)象的過程，但是在ECMAScript中無法創(chuàng)建類，所以就使用一種函數(shù)來封裝以特定接口創(chuàng)建對(duì)象的細(xì)節(jié)2011-12-12
new fun的執(zhí)行過程分析，學(xué)習(xí)面向?qū)ο蟮呐笥芽梢詤⒖枷隆?/div> 2010-08-08
這兩天幫同學(xué)做秒殺網(wǎng)，打算將前臺(tái)和后臺(tái)徹底分離，僅用ajax通信。這樣就免不了大量的使用javascript，于是發(fā)現(xiàn)，js果然是難學(xué)難用。2011-06-06
我說過，我要寫一個(gè)JS的框架，我知道有人會(huì)從心底BS我，但是：你繼續(xù)BS吧！我還是要寫我的JOBJ。2008-03-03
javascript 面向?qū)ο笕吕砭氈當(dāng)?shù)據(jù)的封裝
JavaScript 是一種非常靈活的面向?qū)ο蟪绦蛟O(shè)計(jì)語言，它與傳統(tǒng)的強(qiáng)類型的面向?qū)ο蟪绦蛟O(shè)計(jì)語言（如 C++，Java，C# 等）有很大不同，所以要實(shí)現(xiàn)如 C++、java、C# 當(dāng)中的一些特性就需要換一種思考方式來解決。2009-12-12
javascript面向?qū)ο蟮姆绞綄?shí)現(xiàn)的彈出層效果代碼
由于本人以前是.net程序員，所以即使現(xiàn)在在做前端，也習(xí)慣于用面向?qū)ο蟮姆绞骄帉慾s腳本，我想如果你以前也是或者現(xiàn)在還是名第三代程序員的話，應(yīng)該對(duì)此并不陌生。2010-01-01![編寫可維護(hù)面向?qū)ο蟮腏avaScript代碼[翻譯]](http://img.jbzj.com/images/xgimg/bcimg6.png)
編寫可維護(hù)面向?qū)ο蟮腏avaScript代碼[翻譯]
編寫可維護(hù)面向?qū)ο蟮腏avaScript代碼[翻譯]，學(xué)習(xí)js面向?qū)ο缶帉懙呐笥芽梢詤⒖枷隆?/div> 2011-02-02
在javascript中一共有四種調(diào)用模式：方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式和apply調(diào)用模式。這些模式在如何初始化關(guān)鍵參數(shù)this上存在差異2011-12-12
這里引入的是YUI 2.7.0版，只需引入yahoo.js。YUI引入了命名空間，類似于java的包。以下yahoo的工具函數(shù)包2009-07-07
JavaScript面象對(duì)象設(shè)計(jì)
學(xué)習(xí)js的高境界就是使用面向?qū)ο蟮姆椒?，?shí)現(xiàn)js的調(diào)用2008-04-04最新評(píng)論
大家感興趣的內(nèi)容
- 1JavaScript 三種創(chuàng)建對(duì)象的方法
- 2JS 創(chuàng)建對(duì)象(常見的幾種方法)
- 3JS類的封裝及實(shí)現(xiàn)代碼
- 4詳解new function(){}和function(){
- 5javascript復(fù)制對(duì)象使用說明
- 6js創(chuàng)建對(duì)象的幾種常用方式小結(jié)(推薦)
- 7Javascript 面向?qū)ο螅ㄒ唬?共有方法，私有方法，特
- 8改變javascript函數(shù)內(nèi)部this指針指向的三種方法
- 9Javascript Object.extend
- 10JavaScript定義類或函數(shù)的幾種方式小結(jié)
最近更新的內(nèi)容
- javascript 對(duì)象定義方法 簡單易學(xué)
- Javascript 面向?qū)ο螅ǘ┓庋b代碼
- javascript面向?qū)ο缶幊?一) 實(shí)例代碼
- javascript 面向?qū)ο缶幊? function是方法(函數(shù))
- JavaScript中使用構(gòu)造函數(shù)實(shí)現(xiàn)繼承的代碼
- JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)三 原型模式（上）
- 面向?qū)ο蟮腏avascript之一(初識(shí)Javascript)
- Javascript 面向?qū)ο螅ㄒ唬?共有方法，私有方法，特權(quán)方法)
- javascript 類定義的4種方法
- JavaScript面向?qū)ο?極簡主義法minimalist approac