JavaScript 面向?qū)ο笕腴T(mén)精簡(jiǎn)篇第2/2頁(yè)
更新時(shí)間：2009年03月21日 16:37:29 作者：
圍繞面向?qū)ο蟮膸状箨P(guān)鍵字：封裝 ，繼承 ，多態(tài) ，展開(kāi)JavaScript面向?qū)ο?/div>
C.摻元類(lèi)： 把一些常用通用性比較大的方法統(tǒng)一封裝在一個(gè)函數(shù)中，然后通過(guò)下面這個(gè)函數(shù)分派給要用到這些方法的類(lèi)．還可以針對(duì)不同的類(lèi)，選擇性的傳遞需要的方法。
<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è)人覺(jué)得這個(gè)比較抽象，很難言傳，所以下面就從重載和覆蓋兩個(gè)方面來(lái)簡(jiǎn)單闡述一下。
重載 ：上面這個(gè)例子中agument函數(shù)初始帶了兩個(gè)參數(shù)，但是在后面的調(diào)用中，agument(Fish,Name,”sayLove”)同樣可以帶入任意多個(gè)參數(shù)，javascript的重載，是在函數(shù)中由用戶(hù)自己通過(guò)操作arguments這個(gè)屬性來(lái)實(shí)現(xiàn)的。
覆蓋 ：這個(gè)很簡(jiǎn)單，就是子類(lèi)中定義的方法如果與從超類(lèi)中繼承過(guò)來(lái)的的方法同名，就覆蓋這個(gè)方法（這里并不是覆蓋超類(lèi)中的方法，注意一下），這里就不累贅了！
最后重點(diǎn)著墨說(shuō)一下this和執(zhí)行上下文 ，在前面舉的封裝例子中，this都是表示this所在的類(lèi)的實(shí)例化對(duì)象本身，但是并不是千篇一律的，打個(gè)比方，通過(guò)HTML屬性定義的事件處理代碼，見(jiàn)如下代碼：
<script type="text/javascript">
var Name = function(name) {
this.name = name;
this.getName = function () {
alert(this.name);
}
};
var ioldFish = new Name("老魚(yú)"),
btn = document.getElementById('btn');
btn.onclick = ioldFish.getName;
//btn.onclick = function(){ioldFish.getName.call(ioldFish)};
</script>
上例中點(diǎn)了按鈕以后彈出框里并沒(méi)有顯示出實(shí)例對(duì)象的屬性，這是因?yàn)閠his的執(zhí)行上下文已經(jīng)改變了，他現(xiàn)在所在的上下文應(yīng)該是input這個(gè) HTML標(biāo)簽，但是該標(biāo)簽又不存在getName這個(gè)屬性，所以自然無(wú)法輸出這個(gè)屬性的屬性值了！從這個(gè)例子我們不難看出：執(zhí)行上下文是在執(zhí)行時(shí)才確定的，它隨時(shí)可以變。
當(dāng)然你可以去掉上面我注釋掉的那段代碼，通過(guò)call改變this的執(zhí)行上下文，從而獲取getName方法。apply方法同樣可以實(shí)現(xiàn)改變執(zhí)行上下文的功能，不過(guò)在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)，去寫(xiě)一個(gè)簡(jiǎn)單的腳本框架了，多多實(shí)踐，相信不久的將來(lái)就能高手進(jìn)級(jí)了
C.摻元類(lèi)： 把一些常用通用性比較大的方法統(tǒng)一封裝在一個(gè)函數(shù)中，然后通過(guò)下面這個(gè)函數(shù)分派給要用到這些方法的類(lèi)．還可以針對(duì)不同的類(lèi)，選擇性的傳遞需要的方法。
復(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è)人覺(jué)得這個(gè)比較抽象，很難言傳，所以下面就從重載和覆蓋兩個(gè)方面來(lái)簡(jiǎn)單闡述一下。
重載 ：上面這個(gè)例子中agument函數(shù)初始帶了兩個(gè)參數(shù)，但是在后面的調(diào)用中，agument(Fish,Name,”sayLove”)同樣可以帶入任意多個(gè)參數(shù)，javascript的重載，是在函數(shù)中由用戶(hù)自己通過(guò)操作arguments這個(gè)屬性來(lái)實(shí)現(xiàn)的。
覆蓋 ：這個(gè)很簡(jiǎn)單，就是子類(lèi)中定義的方法如果與從超類(lèi)中繼承過(guò)來(lái)的的方法同名，就覆蓋這個(gè)方法（這里并不是覆蓋超類(lèi)中的方法，注意一下），這里就不累贅了！
最后重點(diǎn)著墨說(shuō)一下this和執(zhí)行上下文 ，在前面舉的封裝例子中，this都是表示this所在的類(lèi)的實(shí)例化對(duì)象本身，但是并不是千篇一律的，打個(gè)比方，通過(guò)HTML屬性定義的事件處理代碼，見(jiàn)如下代碼：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var Name = function(name) {
this.name = name;
this.getName = function () {
alert(this.name);
}
};
var ioldFish = new Name("老魚(yú)"),
btn = document.getElementById('btn');
btn.onclick = ioldFish.getName;
//btn.onclick = function(){ioldFish.getName.call(ioldFish)};
</script>
上例中點(diǎn)了按鈕以后彈出框里并沒(méi)有顯示出實(shí)例對(duì)象的屬性，這是因?yàn)閠his的執(zhí)行上下文已經(jīng)改變了，他現(xiàn)在所在的上下文應(yīng)該是input這個(gè) HTML標(biāo)簽，但是該標(biāo)簽又不存在getName這個(gè)屬性，所以自然無(wú)法輸出這個(gè)屬性的屬性值了！從這個(gè)例子我們不難看出：執(zhí)行上下文是在執(zhí)行時(shí)才確定的，它隨時(shí)可以變。
當(dāng)然你可以去掉上面我注釋掉的那段代碼，通過(guò)call改變this的執(zhí)行上下文，從而獲取getName方法。apply方法同樣可以實(shí)現(xiàn)改變執(zhí)行上下文的功能，不過(guò)在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)，去寫(xiě)一個(gè)簡(jiǎn)單的腳本框架了，多多實(shí)踐，相信不久的將來(lái)就能高手進(jìn)級(jí)了
相關(guān)文章
JavaScript為對(duì)象原型prototype添加屬性的兩種方式
為對(duì)象原型prototype添加屬性的的方法， 需要的朋友可以參考下。2010-08-08
js類(lèi)中獲取外部函數(shù)名的方法與代碼...2007-09-09
在第一章中，我們使用構(gòu)造函數(shù)和原型的方式在JavaScript的世界中實(shí)現(xiàn)了類(lèi)和繼承， 但是存在很多問(wèn)題。這一章我們將會(huì)逐一分析這些問(wèn)題，并給出解決方案。2009-07-07
JavaScript 面向?qū)ο缶幊蹋?） 基礎(chǔ)
自從有了Ajax這個(gè)概念，JavaScript作為Ajax的利器，其作用一路飆升。JavaScript最基本的使用，以及語(yǔ)法、瀏覽器對(duì)象等等東東在這里就不累贅了。把主要篇幅放在如何實(shí)現(xiàn)JavaScript的面向?qū)ο缶幊谭矫妗?/div> 2010-05-05
JavaScript 類(lèi)的定義和引用 JavaScript高級(jí)培訓(xùn) 自定義對(duì)象
在Java語(yǔ)言中，我們可以定義自己的類(lèi)，并根據(jù)這些類(lèi)創(chuàng)建對(duì)象來(lái)使用，在Javascript中，我們也可以定義自己的類(lèi)，例如定義User類(lèi)、Hashtable類(lèi)等等。2010-04-04
利用原型繼承的關(guān)鍵有兩步操作，需要的朋友可以參考下。2009-12-12
數(shù)據(jù)類(lèi)型,基本數(shù)據(jù)類(lèi)型基本數(shù)據(jù)類(lèi)型是JS語(yǔ)言最底層的實(shí)現(xiàn)。2008-04-04
javascript 面向?qū)ο缶幊?萬(wàn)物皆對(duì)象
javascript幾乎成了如今web開(kāi)發(fā)人員必學(xué)必會(huì)的一門(mén)語(yǔ)言，但很多人卻只停在了一些表單驗(yàn)證等基礎(chǔ)操作層面上，在面向?qū)ο笳Z(yǔ)言大行其道的當(dāng)下，我們需要去學(xué)習(xí)javascript的面向?qū)ο蟮闹R(shí)，以便更好的掌握javascript、為深入理解各種腳本框架打好基礎(chǔ)。2009-09-09
Javascript 面向?qū)ο螅ǘ┓庋b代碼，需要的朋友可以參考下2012-05-05