原型鏈的基本思想是: 利用原型讓一個引用類型繼承另一個引用類型的屬性和方法 。 構造函數、原型和實例的關係 :每個構造函數都有一個原型對象,原型對象都包含一個指向構造函數的指針,而實例都包含一個指向原型對象的內部指針。 如果讓原型對象等於另一個對象的實例,這樣原型對象將包含一個指向另一個原型的指針, ...
原型鏈的基本思想是:利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。
構造函數、原型和實例的關係:每個構造函數都有一個原型對象,原型對象都包含一個指向構造函數的指針,而實例都包含一個指向原型對象的內部指針。
如果讓原型對象等於另一個對象的實例,這樣原型對象將包含一個指向另一個原型的指針,相應地,另一個原型中也包含著一個指向另一個構造函數的指針。
實現原型鏈的基本模式:
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,繼承是通過創建SuperType的實例,並將該實例賦給SubType.prototype
實現的。實現的本質是重寫原型對象,換成一個新類型的實例。這樣,原來存在於SuperType的實例中的屬性和方法,也存在與SubType.prototype
中了。然後給SubType.prototype
添加一個方法,這樣就繼承了SuperType的屬性和方法的基礎上又添加了一個方法。
上例中的實例關係表示如下:
上面沒有使用SubType預設提供的原型,而是給它換了一個新原型;這個新原型就是SuperType的實例。新原型內部還有一個執行SuperType的原型的指針。結果變成了instance指向SubType的原型,SubType的原型又指向SuperType的原型。getValue()方法仍然還在SuperType.prototype中,但prototype則位於SubType.prototype中。這是因為property是一個實例屬性,而getSuperValue()則是一個原型方法。既然SubType.prototype現在是SuperType的實例,那麼property自然位於該實例中。
註意:instance.constructor現在指向的是SuperType,因為SubType的原型指向了另一個對象——SuperType的原型,這個原型對象的constructor屬性指向的是SuperType。
當以讀取模式訪問一個屬性時,首先會在實例中搜索該屬性。如果沒有找到該屬性。則會繼續搜索實例的原型。通過原型鏈實現繼承的情況下,搜索過程就得以沿著原型鏈繼續向上。
預設的原型
所有引用類型都預設繼承了Object,而這個繼承也是通過原型鏈實現的。所有函數的預設原型都是Object的實例。因此預設原型都會包含一個內部指針,指向Object.prototype。這就是為什麼自定義類型都會繼承toString()、valueOf()等方法的原因。
完整的原型鏈:
在上面的繼承體系中,SubType繼承了SuperType,SuperType繼承了Object。當調用了instance.toString()時,實際調用的是保存在Object.prototype中的那個方法。
確定實例和原型的關係
可以通過兩種方式來確定原型和實例之間的關係:
使用instanceof操作符
alert(instance instanceof Object);
alert(instance instanceof SuperType);
alert(instance instanceof SubType);
由於原型鏈的關係,上面全部返回true。
使用isPrototypeOf()方法
alert(Object.prototype.isPrototypeOf(instance));
alert(SuperType.prototype.isPrototypeOf(instance));
alert(SubType.prototype.isPrototypeOf(instance));
謹慎定義方法
給原型添加方法的代碼一定要放在替換原型的語句之後。
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的實例替換原型之後,再定義那兩個方法。
另外,在通過原型鏈實現繼承時,不能使用該對象字面量創建原型方法。因為這樣做會重寫原型鏈:
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;
},
someOtherMethod: function () {
return false;
}
};
var instance = new SubType();
alert(instance.getSuperValue()); // error
上例將SuperType的實例賦值給原型,緊接著又將原型替換成一個對象字面量而導致的問題。現在的原型包含一個Object的實例,而非SuperType的實例,SubType和SuperType之間已經沒有關係了。
原型鏈的問題
前面已經介紹過,包含引用類型值得原型屬性會被所有實例共用;而這也正是為什麼要在構造函數中,而不是在原型對象中定義屬性的原因。
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構造函數中定義了一個colors屬性,該屬性包含一個數組,SuperType的每個實例都會有各自包含自己數組的colors屬性。當SubType通過原型鏈繼承了SuperType之後,SubType.prototype就變成了SuperType的一個實例,所以它也擁有了一個它自己的colors屬性。但是,SubType的所有實例都會共用這一個colors屬性。
另一問題是,沒有辦法在不影響所有對象實例的情況下,給超類的構造函數傳遞參數。