深入淺析javascript繼承體系

最近做web項目，接觸了jquery等框架，雖然使用方便，但是還是想學習下Javascript，今天分享下最近對js原型繼承的理解，不足之處歡迎指正。

一、構造器的原型屬性與原型對象

　　剛接觸js時通常依樣畫瓢，用函數new一個實例，也不知道其原因，只聽說js中函數即對象。原來js中沒有采用Java等語言中的類繼承體系，而是使用原型對象（prototype）實現繼承體系，具體說是利用“構造器”實現類的功能。

首先解釋下原型繼承中的兩個重要概念：原型屬性、原型對象(實例)。

就js對象系統而言，創建的每個函數(構造器)都有一個prototype原型屬性，同時，通過構造器創建的每個對象實例也包含一個_proto_屬性，prototype和_proto_屬性是一個指針，指向原型對象。普通函數與構造函數的唯一區別就是，其原型屬性prototype是不是一個有意義的值。

原型屬性prototype所指向的原型是一個對象實例（Object instance）。具體如下圖所示，若構造器Animal()有一個原型對象B，則由該構造器創建的實例都必然復制于B。即：Animal()的實例a1的_proto_屬性也會指向原型對象B。因此，實例a1能夠繼承B的所有屬性、方法和其他性質。

圖1 js對象實例化實現

二、空的對象

在javascript中，“空的對象”是整個原型繼承體系的根基，是所有對象的基礎。介紹“空的對象”之前，必須先介紹下“空對象(null)”。

空對象null

　　null不是“空的對象”，作為javascript中的一個保留字，其含義是：

　　（1）屬于對象類型

　　（2）對象是空值

作為一個對象類型，可以使用for…in去列舉它，但是作為一個空值，null沒有任何方法和屬性(包括constructor、_proto_等屬性)，因此列舉不到任何內容。如下例所示：　　

var num=0；
　　for(var propertyName in null)
　　{
　　num++;
　　}

　　Alert(num);//顯示值為0

最重要的一點是null沒有原型，它并不是自Object()構造器（或其子類）實例化而來，對其進行instanceof 運算會返回false。

　　2.“空的對象”

　　“空的對象”是指一個標準的、通過Object()構造的對象實例。例如：

obj=new Object();或 obj={}；

　　“空的對象”具有“對象”的一切特性，因此可以存取toString()、valueof等預定義的屬性和方法。

　　3.“空的對象”與null的關系

　　 如下圖2中紅線所示路徑，當通過”Object.prototype._proto_”獲取Object原型對象的-proto-屬性時，將會得到”null”，由于null對象沒有任何屬性，也就是說”Object {}”

　　原型對象就是原型鏈的終點了。

圖2 js類繼承體系

三、Javascript繼承的實現以及原型鏈維護

（1）繼承的實現

　　第一節說過javascript中類繼承是通過修改構造函數的原型屬性prototype實現的。如下代碼所示：

function Animal() {
this.name = 'Animal';
};
function Dog() {
};
　　Dog.prototype = new Animal();
var d = new Dog();
console.log(d.name);//'Animal'

　　通過創建一個Animal類型的實例并將其賦值給構造函數Dog()的prototype屬性，從而實現類型繼承，即Animal是Dog的父類。這樣Dog類型的實例d也能訪問Animal類型的name屬性。

（2）原型鏈

JS對象繼承體系中有兩種原型鏈：“內部原型鏈”和“構造器原型鏈”。如圖3所示，黑色箭頭指示路徑是通過構造函數的prototype屬性保持的“構造器原型鏈”。紅色箭頭指示路徑是通過對象實例的_proto_屬性保持的“內部原型鏈”。

圖3 原型鏈

（3）原型鏈維護

圖3說明構造器通過顯示的prototype構建了一個原型鏈，而對象實例也通過_ proto _屬性構建了一個原型鏈。由于_ proto _是一個不可訪問的內部屬性（Chrome中可以查看對象_ proto _屬性的值，但不可以修改），因此無法從子類（Dog）的實例dog1開始訪問整個原型鏈。因此，我們需要從圖3中的“內部原型鏈”和“構造器原型鏈”中找到一個連接點，使得實例不能訪問obj._proto_的情況下通過構造器訪問內部原型鏈（將兩種原型鏈串聯起來）。

若要從子類的實例開始訪問整個原型鏈，需要使用實例的constructor屬性維護原型鏈。

其實，JavaScript已經為構造器維護了原型屬性，根據如下測試代碼，當我們自定義一個構造器時，其原型對象是一個Object()類型的實例，但是其原型對象的constructor屬性默認總是指向構造器自身，而非指向其父類Object。如圖4中構造器實例中藍色框中的constructor屬性，該constructor屬性繼承自原型對象，因此可以得出一個自定義的構造器產生的實例，其constructor屬性默認總是指向該構造器。

function Animal() {
};
var a = new Animal();
console.log(Animal.prototype);//Object(){}
console.log(Animal.prototype.constructor === Animal);//true//true

圖4

　　因此，在_proto_屬性不可訪問時，可通過a1.constructor.prototype獲取實例a1的原型對象。然而，當我們自定義一個構造函數Dog()，并且手動指定其prototype屬性值為Animal，即指定Dog的父類為Animal。此時訪問d1.constructor值為Animal，而不是Dog；由圖5可以看出，Dog的原型對象和dog分別由Animal()和Dog()兩個不同的構造器產生，然而他們的constructor屬性指向了相同的構造器（Animal），這樣就與使用constructor屬性串聯兩種原型鏈的設想沖突了。

圖5

　　是構造器出問題還是原型出了問題？圖5可以看出，原型繼承要求的“復制行為”已經正確實現，能夠從子類實例中訪問原型對象屬性，問題是在給子類構造器Dog()賦予一個原型對象時應該“修正”該原型對象的構造屬性值(constructor)。ECMAScript 3標準提供的方法是：保持原型的構造器屬性，在子類構造器中初始化其實例對象的構造屬性。代碼如下：　

function Dog () {
　　//初始化constructor屬性
　　 this.constructor=Dog; //或 this.constructor=arguments.callee;
　　};
　　Dog.prototype = new Animal();//賦予原型對象，實現繼承

圖6

對constructor屬性“修正”后效果如圖6所示，在子類構造器Dog中初始化其實例對象的constructor屬性后，Dog的實例對象的constructor都指向Dog，而Dog的原型對象的constructor仍然指向父類型構造器Animal。這樣就可以實現利用constructor屬性串聯起原型鏈，可以從子類實例開始回溯整個原型鏈。

總結

以上所述是小編給大家介紹的javascript繼承體系的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！