快捷導(dǎo)航

關(guān)于JavaScript中原型繼承中的一點(diǎn)思考

更新時(shí)間：2012年07月25日 11:48:59 作者：

JS中原型的概念不想多說，這里只是探討一下修改父類原型屬性與覆蓋父類原型中屬性的區(qū)別，防止以后出問題

我們先看一段傳統(tǒng)的繼承代碼：

 
//定義超類 
function Father(){ 
this.name = "父親"; 
} 
Father.prototype.theSuperValue = ["NO1","NO2"]; 
//定義子類 
function Child(){ 
} 
//實(shí)現(xiàn)繼承 
Child.prototype = new Father(); 
//修改共享數(shù)組 
Child.prototype.theSuperValue.push("修改"); 
//創(chuàng)建子類實(shí)例 
var theChild = new Child(); 
console.log(theChild.theSuperValue); //["NO1","NO2","修改"] 
//創(chuàng)建父類實(shí)例 
var theFather = new Father(); 
console.log(theFather.theSuperValue); //["NO1","NO2","修改"] 

通過上面的代碼，我們注意“加紅”的代碼，子類Child的原型對(duì)象是父類Father的一個(gè)實(shí)例（new Father()），我們?cè)谶@里是調(diào)用new Father()對(duì)象中的theSuperValue屬性，因?yàn)閚ew Father()對(duì)象中沒有此屬性（只有name屬性），因此會(huì)沿著原型鏈向它的原型對(duì)象（Father.prototype）中去找，找到后發(fā)現(xiàn)是一個(gè)數(shù)組，而且是引用類型，此時(shí)我們往此數(shù)組中添加一個(gè)字符串“修改”。

　　之后，我們新建了Child的實(shí)例對(duì)象theChild，當(dāng)theChild調(diào)用theSuperValue屬性時(shí)，首先它自己里面沒有此屬性，就會(huì)去它的原型對(duì)象(new Father)中去找，可惜這里也沒有，接著會(huì)到new Father()的原型中去找，OK，在Father.prototype中找到了這個(gè)數(shù)組，發(fā)現(xiàn)是["NO1","NO2","修改"]。

　　再接著，我們創(chuàng)建了Father的實(shí)例對(duì)象theFather，同上，我們?cè)贔ather.prototype中找到了這個(gè)引用類型的數(shù)組["NO1","NO2","修改"]。（當(dāng)然，數(shù)組都是引用類型的?。?

　　通過上面的贅述，本來已經(jīng)理解原型鏈概念的朋友覺得是廢話連篇，其實(shí)我也是呵呵，接下來我們?cè)倏匆粋€(gè)相似的例子：

復(fù)制代碼代碼如下:

 
//定義超類 
function Father() { 
this.name = "父親"; 
} 
Father.prototype.theSuperValue = ["NO1", "NO2"]; 
//定義子類 
function Child() { 
} 
//實(shí)現(xiàn)繼承 
Child.prototype = new Father(); 
//修改共享數(shù)組 
Child.prototype.theSuperValue = ["我是覆蓋代碼"] 
//創(chuàng)建子類實(shí)例 
var theChild = new Child(); 
console.log(theChild.theSuperValue); 
//創(chuàng)建父類實(shí)例 
var theFather = new Father(); 
console.log(theFather.theSuperValue); 

我們看一下上面的代碼，我用一種比較特別的紫色標(biāo)注了此段代碼與上段代碼的小小區(qū)別，但結(jié)果卻發(fā)生了“巨大”變化，見下面的截圖：

　　為什么我說是巨大變化，是因?yàn)槲覀儚摹爸赜霉矊傩浴边^渡到“覆蓋公共屬性，建立自己特色屬性”上來！我這里是用數(shù)組演示的，其實(shí)第二種情況常常用在Function中，用子類的方法來覆蓋父類的方法。

在第二段代碼中，我們需要關(guān)注的是紫色代碼前的“=”號(hào)，它是賦值操作符。如果我們對(duì)Child.prototype及new Father()對(duì)象調(diào)用這個(gè)賦值操作符時(shí)，我們就在這個(gè)對(duì)象上“新建”了一個(gè)屬性，當(dāng)在下面的theChild實(shí)例上調(diào)用theSuperValue時(shí)，返回的當(dāng)然是新屬性值["我是覆蓋代碼"]。

　　但當(dāng)我們新創(chuàng)建一個(gè)父類實(shí)例theFather對(duì)象時(shí)，調(diào)用該對(duì)象上的theSuperValue屬性，我們就會(huì)發(fā)現(xiàn)對(duì)象上并沒有啊，這是為什么呢？因?yàn)槲覀儎偛鸥采w的是Father對(duì)象new Father();而不是Father類，所以，通過Fater（）構(gòu)造函數(shù)創(chuàng)建的新對(duì)象theFather并不包含新建的屬性，當(dāng)然，接下來的事情大家都明白，就是沿著原型鏈向上找，OK，在Father.prototype中找到了，就是我們一開始定義的那個(gè)數(shù)組。

　　通過上面兩個(gè)例子，我們?cè)贘S中使用原型提供的繼承功能時(shí)，尤其是利用子對(duì)象操作原型方法、對(duì)象時(shí)，切記“=”號(hào)賦值與引用調(diào)用這兩種不同的操作，因?yàn)樗麄儠?huì)帶來完全不同的結(jié)果。

您可能感興趣的文章: