Javascript并不是一門面向?qū)ο蟮恼Z(yǔ)言，沒有提供傳統(tǒng)的繼承方式，但是它提供了一種原型繼承的方式，利用自身提供的原型屬性來實(shí)現(xiàn)繼承。

原型鏈?zhǔn)荍avaScript中繼承的主要方法。

原型鏈的基本思想是：利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。

構(gòu)造函數(shù)、原型和實(shí)例的關(guān)系：每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個(gè)指向原型對(duì)象的內(nèi)部指針。

如果讓原型對(duì)象等于另一個(gè)對(duì)象的實(shí)例，這樣原型對(duì)象將包含一個(gè)指向另一個(gè)原型的指針，相應(yīng)地，另一個(gè)原型中也包含著一個(gè)指向另一個(gè)構(gòu)造函數(shù)的指針。

實(shí)現(xiàn)原型鏈的基本模式：

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
};
function SubType() {
this.subproperty = false;
}
// 繼承SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); // true 

SubType繼承了SuperType,繼承是通過創(chuàng)建SuperType的實(shí)例，并將該實(shí)例賦給SubType.prototype實(shí)現(xiàn)的。實(shí)現(xiàn)的本質(zhì)是重寫原型對(duì)象，換成一個(gè)新類型的實(shí)例。這樣，原來存在于SuperType的實(shí)例中的屬性和方法，也存在與SubType.prototype中了。然后給SubType.prototype添加一個(gè)方法，這樣就繼承了SuperType的屬性和方法的基礎(chǔ)上又添加了一個(gè)方法。

上例中的實(shí)例關(guān)系表示如下：

上面沒有使用SubType默認(rèn)提供的原型，而是給它換了一個(gè)新原型；這個(gè)新原型就是SuperType的實(shí)例。新原型內(nèi)部還有一個(gè)執(zhí)行SuperType的原型的指針。結(jié)果變成了instance指向SubType的原型，SubType的原型又指向SuperType的原型。getValue()方法仍然還在SuperType.prototype中，但prototype則位于SubType.prototype中。這是因?yàn)閜roperty是一個(gè)實(shí)例屬性，而getSuperValue()則是一個(gè)原型方法。既然SubType.prototype現(xiàn)在是SuperType的實(shí)例，那么property自然位于該實(shí)例中。

注意：instance.constructor現(xiàn)在指向的是SuperType，因?yàn)镾ubType的原型指向了另一個(gè)對(duì)象——SuperType的原型，這個(gè)原型對(duì)象的constructor屬性指向的是SuperType。

當(dāng)以讀取模式訪問一個(gè)屬性時(shí)，首先會(huì)在實(shí)例中搜索該屬性。如果沒有找到該屬性。則會(huì)繼續(xù)搜索實(shí)例的原型。通過原型鏈實(shí)現(xiàn)繼承的情況下，搜索過程就得以沿著原型鏈繼續(xù)向上。

默認(rèn)的原型

所有引用類型都默認(rèn)繼承了Object，而這個(gè)繼承也是通過原型鏈實(shí)現(xiàn)的。所有函數(shù)的默認(rèn)原型都是Object的實(shí)例。因此默認(rèn)原型都會(huì)包含一個(gè)內(nèi)部指針，指向Object.prototype。這就是為什么自定義類型都會(huì)繼承toString()、valueOf()等方法的原因。

完整的原型鏈：

在上面的繼承體系中，SubType繼承了SuperType，SuperType繼承了Object。當(dāng)調(diào)用了instance.toString()時(shí)，實(shí)際調(diào)用的是保存在Object.prototype中的那個(gè)方法。

確定實(shí)例和原型的關(guān)系

可以通過兩種方式來確定原型和實(shí)例之間的關(guān)系：

使用instanceof操作符

alert(instance instanceof Object);
alert(instance instanceof SuperType);
alert(instance instanceof SubType); 

由于原型鏈的關(guān)系，上面全部返回true。

使用isPrototypeOf()方法

alert(Object.prototype.isPrototypeOf(instance));
alert(SuperType.prototype.isPrototypeOf(instance));
alert(SubType.prototype.isPrototypeOf(instance)); 

謹(jǐn)慎定義方法

給原型添加方法的代碼一定要放在替換原型的語(yǔ)句之后。

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
};
function SubType() {
this.subproperty = false;
}
SuperType.prototype = new SuperType();
// 添加方法
SubType.prototype.getSubValue = function () {
return this.subproperty;
};
// 覆蓋超類中的方法
SubType.prototype.getSuperValue = function () {
return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); // false 

上面的例子必須注意的是，在用SuperType的實(shí)例替換原型之后，再定義那兩個(gè)方法。

另外，在通過原型鏈實(shí)現(xiàn)繼承時(shí)，不能使用該對(duì)象字面量創(chuàng)建原型方法。因?yàn)檫@樣做會(huì)重寫原型鏈：

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
};
function SubType() {
this.subproperty = false;
}
// 繼承SuperType
SubType.prototype = new SuperType();
// 使用字面量添加新方法，導(dǎo)致上一行代碼無效
SubType.prototype = {
getSubValue :function() {
return this.subproperty;
},
someOtherMethod: function () {
return false;
}
};
var instance = new SubType();
alert(instance.getSuperValue()); // error 

上例將SuperType的實(shí)例賦值給原型，緊接著又將原型替換成一個(gè)對(duì)象字面量而導(dǎo)致的問題?，F(xiàn)在的原型包含一個(gè)Object的實(shí)例，而非SuperType的實(shí)例，SubType和SuperType之間已經(jīng)沒有關(guān)系了。

原型鏈的問題

前面已經(jīng)介紹過，包含引用類型值得原型屬性會(huì)被所有實(shí)例共享；而這也正是為什么要在構(gòu)造函數(shù)中，而不是在原型對(duì)象中定義屬性的原因。

function SuperType() {
this.colors = ["red", "blue", "green"];
}
function SubType() {
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); // "red", "blue", "green", "black"
var instance2 = new SubType();
alert(instance2.colors); // "red", "blue", "green", "black" 

在上面的例子中，SuperType構(gòu)造函數(shù)中定義了一個(gè)colors屬性，該屬性包含一個(gè)數(shù)組，SuperType的每個(gè)實(shí)例都會(huì)有各自包含自己數(shù)組的colors屬性。當(dāng)SubType通過原型鏈繼承了SuperType之后，SubType.prototype就變成了SuperType的一個(gè)實(shí)例，所以它也擁有了一個(gè)它自己的colors屬性。但是，SubType的所有實(shí)例都會(huì)共享這一個(gè)colors屬性。

另一問題是，沒有辦法在不影響所有對(duì)象實(shí)例的情況下，給超類的構(gòu)造函數(shù)傳遞參數(shù)。

以上所述是小編給大家介紹的JavaScript基于原型鏈的繼承 的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論