實(shí)現(xiàn)JavaScript中繼承的三種方式
更新時(shí)間：2009年10月16日 21:34:29 作者：
在JavaScript中，繼承可以通過三種手法實(shí)現(xiàn)原型鏈繼承 使用apply、call方法 對(duì)象實(shí)例間的繼承。
一、原型鏈繼承
在原型鏈繼承方面，JavaScript與java、c#等語(yǔ)言類似，僅允許單父類繼承。prototype繼承的基本方式如下：
function Parent(){}
function Child(){}
Child.prototype = new Parent();
通過對(duì)象Child的prototype屬性指向父對(duì)象Parent的實(shí)例，使Child對(duì)象實(shí)例能通過原型鏈訪問到父對(duì)象構(gòu)造所定義的屬性、方法等。
構(gòu)造通過原型鏈鏈接了父級(jí)對(duì)象，是否就意味著完成了對(duì)象的繼承了呢？答案是否定的。如：
function Parent(){}
function Child(){}
Child.prototype = new Parent();
var child = new Child();
alert(child.constructor);//function Parent(){}
alert(child instanceof Child);//true
盡管child依然可以作為Child的實(shí)例使用，但此時(shí)已經(jīng)丟失了實(shí)例child原有的對(duì)象構(gòu)造信息。彌補(bǔ)該缺陷的方法如下：
function Parent(){}
function Child(){}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
var child = new Child();
alert(child.constructor);//function Parent(){}
alert(child instanceof Child);//true
如上代碼片段“Child.prototype.constructor = Child”所示，通過顯示地指定對(duì)象構(gòu)造Child的原型，強(qiáng)制所有的Child對(duì)象實(shí)例的構(gòu)造都為Child。
二、使用apply、call方法
由于JavaScript內(nèi)置的Function對(duì)象的apply、call方法改變對(duì)象構(gòu)造中“this”的上下文環(huán)境，使特定的對(duì)象實(shí)例具有對(duì)象構(gòu)造中所定義的屬性、方法。
使用apply、call繼承，在實(shí)際開發(fā)中操作HTML頁(yè)面上的DOM對(duì)象時(shí)尤為常用。如：
<div id="extend">apply,call繼承</div>
<script language="javascript">
function ext()
{
this.onclick=function(){alert(this.innerHTML)}
}
ext.apply(document.getElementById("extend"));
ext.call(document.getElementById("extend"));
</script>
通過apply或call定義的ext方法，使ext方法內(nèi)部的this上下文表示為DOM對(duì)象“<div id="extend">apply,call繼承</div>”。
值得注意的是，當(dāng)使用apply、call時(shí)，會(huì)直接執(zhí)行對(duì)象構(gòu)造所定義的代碼段，如：
<script language="javascript">
function testExec()
{
alert("執(zhí)行！");
}
testExec.call(null);//彈出execute對(duì)話框
testExec.apply(null);//彈出execute對(duì)話框
</script>
三、對(duì)象實(shí)例間的繼承
JavaScript對(duì)象的多態(tài)性，允許實(shí)例動(dòng)態(tài)地添加屬性、方法。該特性造就了JavaScript中的另一種繼承手法——對(duì)象實(shí)例間的繼承。如：
var Person = {name:"nathena",age:"26"};
var nathena = {sex:"male"};
(function inlineExtends(so,po)
{
for (var i in po)
{
if (so[i])//如果so也具有這個(gè)成員
continue;
so[i] = po[i];
}
})(nathena,Person);
alert(nathena.name);//返回nathana
如以上代碼所示，在對(duì)象的實(shí)例間繼承中，父對(duì)象Persong定義了“人”所具有的共同屬性name、age，子對(duì)象nathena定義了自己的私有屬性“sex”。函數(shù)inlineExtends的功能是，為子對(duì)象nathena復(fù)制父對(duì)象Person中定義的“人”所具有的共同屬性。
其中特別需要注意的語(yǔ)句是“if (so[i])”，此句確保了子對(duì)象原有的成員不被父對(duì)象中同名的成員所覆蓋，而違背面向?qū)ο笾懈缸訉?duì)象之間繼承的原則——子對(duì)象可以覆蓋、重載父對(duì)象的屬性或方法，父對(duì)象僅能對(duì)子對(duì)象隱藏自己的屬性或方法。
在原型鏈繼承方面，JavaScript與java、c#等語(yǔ)言類似，僅允許單父類繼承。prototype繼承的基本方式如下：
復(fù)制代碼 代碼如下:
function Parent(){}
function Child(){}
Child.prototype = new Parent();
通過對(duì)象Child的prototype屬性指向父對(duì)象Parent的實(shí)例，使Child對(duì)象實(shí)例能通過原型鏈訪問到父對(duì)象構(gòu)造所定義的屬性、方法等。
構(gòu)造通過原型鏈鏈接了父級(jí)對(duì)象，是否就意味著完成了對(duì)象的繼承了呢？答案是否定的。如：
復(fù)制代碼 代碼如下:
function Parent(){}
function Child(){}
Child.prototype = new Parent();
var child = new Child();
alert(child.constructor);//function Parent(){}
alert(child instanceof Child);//true
盡管child依然可以作為Child的實(shí)例使用，但此時(shí)已經(jīng)丟失了實(shí)例child原有的對(duì)象構(gòu)造信息。彌補(bǔ)該缺陷的方法如下：
復(fù)制代碼 代碼如下:
function Parent(){}
function Child(){}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
var child = new Child();
alert(child.constructor);//function Parent(){}
alert(child instanceof Child);//true
如上代碼片段“Child.prototype.constructor = Child”所示，通過顯示地指定對(duì)象構(gòu)造Child的原型，強(qiáng)制所有的Child對(duì)象實(shí)例的構(gòu)造都為Child。
二、使用apply、call方法
由于JavaScript內(nèi)置的Function對(duì)象的apply、call方法改變對(duì)象構(gòu)造中“this”的上下文環(huán)境，使特定的對(duì)象實(shí)例具有對(duì)象構(gòu)造中所定義的屬性、方法。
使用apply、call繼承，在實(shí)際開發(fā)中操作HTML頁(yè)面上的DOM對(duì)象時(shí)尤為常用。如：
復(fù)制代碼 代碼如下:
<div id="extend">apply,call繼承</div>
<script language="javascript">
function ext()
{
this.onclick=function(){alert(this.innerHTML)}
}
ext.apply(document.getElementById("extend"));
ext.call(document.getElementById("extend"));
</script>
通過apply或call定義的ext方法，使ext方法內(nèi)部的this上下文表示為DOM對(duì)象“<div id="extend">apply,call繼承</div>”。
值得注意的是，當(dāng)使用apply、call時(shí)，會(huì)直接執(zhí)行對(duì)象構(gòu)造所定義的代碼段，如：
復(fù)制代碼 代碼如下:
<script language="javascript">
function testExec()
{
alert("執(zhí)行！");
}
testExec.call(null);//彈出execute對(duì)話框
testExec.apply(null);//彈出execute對(duì)話框
</script>
三、對(duì)象實(shí)例間的繼承
JavaScript對(duì)象的多態(tài)性，允許實(shí)例動(dòng)態(tài)地添加屬性、方法。該特性造就了JavaScript中的另一種繼承手法——對(duì)象實(shí)例間的繼承。如：
復(fù)制代碼 代碼如下:
var Person = {name:"nathena",age:"26"};
var nathena = {sex:"male"};
(function inlineExtends(so,po)
{
for (var i in po)
{
if (so[i])//如果so也具有這個(gè)成員
continue;
so[i] = po[i];
}
})(nathena,Person);
alert(nathena.name);//返回nathana
如以上代碼所示，在對(duì)象的實(shí)例間繼承中，父對(duì)象Persong定義了“人”所具有的共同屬性name、age，子對(duì)象nathena定義了自己的私有屬性“sex”。函數(shù)inlineExtends的功能是，為子對(duì)象nathena復(fù)制父對(duì)象Person中定義的“人”所具有的共同屬性。
其中特別需要注意的語(yǔ)句是“if (so[i])”，此句確保了子對(duì)象原有的成員不被父對(duì)象中同名的成員所覆蓋，而違背面向?qū)ο笾懈缸訉?duì)象之間繼承的原則——子對(duì)象可以覆蓋、重載父對(duì)象的屬性或方法，父對(duì)象僅能對(duì)子對(duì)象隱藏自己的屬性或方法。
相關(guān)文章
javascript 模式設(shè)計(jì)之工廠模式學(xué)習(xí)心得
接口的實(shí)現(xiàn)，從而使不同子類可以被同等的對(duì)待,恰當(dāng)?shù)氖褂霉S模式,但不要拘泥與形式,理解本質(zhì)。2010-04-04
詳解new function(){}和function(){}() 區(qū)別分析
只要 new 表達(dá)式之后的 constructor 返回（return）一個(gè)引用對(duì)象（數(shù)組，對(duì)象，函數(shù)等），都將覆蓋new創(chuàng)建的匿名對(duì)象，如果返回（return）一個(gè)原始類型（無(wú) return 時(shí)其實(shí)為 return 原始類型 undefined），那么就返回 new 創(chuàng)建的匿名對(duì)象。2008-03-03
JavaScript 基于原型的對(duì)象（創(chuàng)建、調(diào)用）
在我們寫js代碼的時(shí)候，內(nèi)部對(duì)象是不可避免的要引用，但是光靠這些對(duì)象是不夠的，所以需要我們自己定義對(duì)象，這個(gè)時(shí)候通常用到的對(duì)象是第三種，即基于原型的對(duì)象，下面就如何創(chuàng)建自己的對(duì)象，定義對(duì)象的方法、屬性，調(diào)用對(duì)象給出詳細(xì)的說(shuō)明。2009-10-10
JavaScript 設(shè)計(jì)模式學(xué)習(xí) Singleton
JavaScript設(shè)計(jì)模式學(xué)習(xí) Singleton2009-07-07
面向?qū)ο蟮腏avascript之一(初識(shí)Javascript)
Javascript是一門極富表現(xiàn)力的語(yǔ)言，在當(dāng)今大行其道的Web浪潮中扮演著非常關(guān)鍵的作用。合理、高效地利用這門技術(shù)，可以讓我們的Web世界多姿多彩。首先，我們認(rèn)識(shí)一下這門技術(shù)的幾個(gè)獨(dú)特的特性2012-01-01
JavaScript對(duì)象鏈?zhǔn)讲僮鞔a(jquery)
自從使用了jQuery以后，對(duì)它的鏈?zhǔn)讲僮骱苁且蕾?，以至于常常覺得其他庫(kù)不好用。。2010-07-07
繼承,通俗地說(shuō),之前你寫過一些類,這些類中有一些是而你現(xiàn)在要寫的類的功能的子集或者基本相同,那么你不用完全重新寫一個(gè)新的類,你可以把之前寫的類拿過來(lái)使用.這樣的一種代碼重用過程就叫做繼承2011-05-05
javscript對(duì)象原型的小技巧。學(xué)習(xí)js面向?qū)ο蟮呐笥芽梢詤⒖枷隆?/div> 2010-09-09
javascript 設(shè)計(jì)模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)
單體是在腳本加載時(shí)創(chuàng)建的，能將一系列有關(guān)聯(lián)的變量和方法組織為一個(gè)邏輯單元，邏輯單元里面的內(nèi)容通過單一的變量進(jìn)行訪問，也是筆記基礎(chǔ)與常用的面向?qū)ο蟮亩x方法。2010-04-04
JavaScript 繼承機(jī)制的實(shí)現(xiàn)(待續(xù))
JavaScript繼承機(jī)制的實(shí)現(xiàn)，后期會(huì)有一些補(bǔ)充。2010-05-05最新評(píng)論