實(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面象對(duì)象設(shè)計(jì)
學(xué)習(xí)js的高境界就是使用面向?qū)ο蟮姆椒?,?shí)現(xiàn)js的調(diào)用2008-04-04JavaScript對(duì)象鏈?zhǔn)讲僮鞔a(jquery)
自從使用了jQuery以后,對(duì)它的鏈?zhǔn)讲僮骱苁且蕾?,以至于常常覺得其他庫(kù)不好用。。2010-07-07javascript面向?qū)ο蟮姆绞綄?shí)現(xiàn)的彈出層效果代碼
由于本人以前是.net程序員,所以即使現(xiàn)在在做前端,也習(xí)慣于用面向?qū)ο蟮姆绞骄帉慾s腳本,我想如果你以前也是或者現(xiàn)在還是名第三代程序員的話,應(yīng)該對(duì)此并不陌生。2010-01-01JavaScript面向?qū)ο笤O(shè)計(jì)二 構(gòu)造函數(shù)模式
在Javascript面向?qū)ο笤O(shè)計(jì)一——工廠模式 中介紹了使用CreateEmployee()函數(shù)創(chuàng)建員工類。ECMAScript中的構(gòu)造函數(shù)可以用來創(chuàng)建特定類型的對(duì)象,如Object和Array這樣的原生構(gòu)造函數(shù),在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中,此外也可以創(chuàng)建自定義的構(gòu)造函數(shù),從而創(chuàng)建自定義對(duì)象類型的屬性和方法2011-12-12關(guān)于javascript function對(duì)象那些迷惑分析
關(guān)于javascript function對(duì)象那些迷惑分析,學(xué)習(xí)js面向?qū)ο蟮呐笥芽梢詤⒖枷隆?/div> 2011-10-10JavaScript的單例模式 (singleton in Javascript)
JavaScript的單例模式 (singleton in Javascript)2010-06-06Riot.js 快速的JavaScript單元測(cè)試框架
Riot是一個(gè)快速,富有表現(xiàn)力,上下文驅(qū)動(dòng) 的單元測(cè)試框架。最初是用于Ruby的單元測(cè)試,最近作者Alex Young又實(shí)現(xiàn)了Riot的JavaScript版- Riot.js。2009-11-11JavaScript 設(shè)計(jì)模式之組合模式解析
“組合模式”顧名思意就是將多種實(shí)現(xiàn)組合在一起而達(dá)到牽一處而動(dòng)全身的效果。2010-04-04最新評(píng)論