實現JavaScript中繼承的三種方式

2019-11-21 01:04:37

字體：大中小

來源：轉載

供稿：網友

一、原型鏈繼承
　　在原型鏈繼承方面，JavaScript與java、c#等語言類似，僅允許單父類繼承。prototype繼承的基本方式如下：

 
function Parent(){} 
function Child(){} 
Child.prototype = new Parent(); 

　　通過對象Child的prototype屬性指向父對象Parent的實例，使Child對象實例能通過原型鏈訪問到父對象構造所定義的屬性、方法等。
　　構造通過原型鏈鏈接了父級對象，是否就意味著完成了對象的繼承了呢？答案是否定的。如：

復制代碼代碼如下:

 
function Parent(){} 
function Child(){} 
Child.prototype = new Parent(); 
var child = new Child(); 
alert(child.constructor);//function Parent(){} 
alert(child instanceof Child);//true 

　　盡管child依然可以作為Child的實例使用，但此時已經丟失了實例child原有的對象構造信息。彌補該缺陷的方法如下：

復制代碼代碼如下:

 
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”所示，通過顯示地指定對象構造Child的原型，強制所有的Child對象實例的構造都為Child。
二、使用apply、call方法
　　由于JavaScript內置的Function對象的apply、call方法改變對象構造中“this”的上下文環境，使特定的對象實例具有對象構造中所定義的屬性、方法。
　　使用apply、call繼承，在實際開發中操作HTML頁面上的DOM對象時尤為常用。如：

復制代碼代碼如下:

 
　　<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方法內部的this上下文表示為DOM對象“<div id="extend">apply,call繼承</div>”。
　　值得注意的是，當使用apply、call時，會直接執行對象構造所定義的代碼段，如：

復制代碼代碼如下:

 
　　<script language="javascript"> 
　　function testExec() 
　　{ 
　　　　 alert("執行！"); 
　　} 
　　testExec.call(null);//彈出execute對話框 
　　testExec.apply(null);//彈出execute對話框 
　　</script> 

三、對象實例間的繼承
　　JavaScript對象的多態性，允許實例動態地添加屬性、方法。該特性造就了JavaScript中的另一種繼承手法――對象實例間的繼承。如：

復制代碼代碼如下:

 
　　var Person = {name:"nathena",age:"26"}; 
　　var nathena = {sex:"male"}; 
　　(function inlineExtends(so,po) 
　　{ 
　　　　for (var i in po) 
　　　　{ 
　　　　　　if (so[i])//如果so也具有這個成員 
　　　　　　　　continue; 
　　　　　　so[i] = po[i]; 
　　　　} 
　　})(nathena,Person); 
　　alert(nathena.name);//返回nathana 

　　如以上代碼所示，在對象的實例間繼承中，父對象Persong定義了“人”所具有的共同屬性name、age，子對象nathena定義了自己的私有屬性“sex”。函數inlineExtends的功能是，為子對象nathena復制父對象Person中定義的“人”所具有的共同屬性。
　　其中特別需要注意的語句是“if (so[i])”，此句確保了子對象原有的成員不被父對象中同名的成員所覆蓋，而違背面向對象中父子對象之間繼承的原則――子對象可以覆蓋、重載父對象的屬性或方法，父對象僅能對子對象隱藏自己的屬性或方法。

上一篇：JavaScript 函數式編程的原理

下一篇：顯示js對象所有屬性和方法的函數