js繼承之原型繼承

物件導向程式設計都會涉及到繼承這個概念，js中實現繼承的方式主要是通過原型鏈的方法。

每建立乙個函式，該函式就會自動帶有乙個prototype屬性。該屬性是個指標，指向了乙個物件，我們稱之為原型物件。什麼是指標？指標就好比學生的學號，原型物件則是那個學生。我們通過學號找到唯一的那個學生。假設突然，指標設定 null, 學號重置空了，不要慌，物件還存在，學生也沒消失。只是不好找了。

原型物件上預設有乙個屬性constructor，該屬性也是乙個指標，指向其相關聯的建構函式。

通過呼叫建構函式產生的例項，都有乙個內部屬性，指向了原型物件。所以例項能夠訪問原型物件上的所有屬性和方法。

所以三者的關係是，每個建構函式都有乙個原型物件，原型物件都包含乙個指向建構函式的指標，而例項都包含乙個指向原型物件的內部指標。通俗點說就是，例項通過內部指標可以訪問到原型物件，原型物件通過constructor指標，又可以找到建構函式。

下面看乙個例子：12

3456

789functiondog (name)

dog.prototype.speak =function()

vardoggie =newdog('jiwawa');

doggie.speak();//wang

以上**定義了乙個建構函式 dog(), dog.prototype 指向的原型物件，其自帶的屬性construtor又指回了 dog，即 dog.prototype.constructor == dog. 例項doggie由於其內部指標指向了該原型物件，所以可以訪問到 speak方法。

dog.prototype 只是乙個指標，指向的是原型物件，但是這個原型物件並不特別，它也只是乙個普通物件。假設說，這時候，我們讓 dog.protptype 不再指向最初的原型物件，而是另乙個類（animal）的例項，情況會怎樣呢？

前面我們說到，所有的例項有乙個內部指標，指向它的原型物件，並且可以訪問原型物件上的所有屬性和方法。doggie例項指向了dog的原型物件，可以訪問dog原型物件上的所有屬性和方法；如果dog原型物件變成了某乙個類的例項 aaa，這個例項又會指向乙個新的原型物件 aaa，那麼 doggie 此時就能訪問 aaa 的例項屬性和 aa a原型物件上的所有屬性和方法了。同理，新的原型物件aaa碰巧又是另外乙個物件的例項bbb，這個例項bbb又會指向新的原型物件 bbb，那麼doggie此時就能訪問 bbb 的例項屬性和 bbb 原型物件上的所有屬性和方法了。

這就是js通過原型鏈實現繼承的方法了。看下面乙個例子：

//定義乙個 animal 建構函式，作為 dog 的父類
functionanimal () 
animal.prototype.superspeak = function() 
functiondog (name) 
//改變dog的prototype指標，指向乙個 animal 例項
dog.prototype = newanimal();
//上面那行就相當於這麼寫//var animal = new animal(); = animal;
dog.prototype.speak = function() 
var doggie = new dog('jiwawa');
doggie.superspeak(); //animal

解釋一下。以上**，首先定義了乙個 animal 建構函式，通過new animal()得到例項，會包含乙個例項屬性 supertype 和乙個原型屬性 superspeak。另外又定義了乙個dog建構函式。然後情況發生變化，**中加粗那一行，將dog的原型物件覆蓋成了 animal 例項。當 doggie 去訪問superspeak屬性時，js會先在doggie的例項屬性中查詢，發現找不到，然後，js就會去doggie 的原型物件上去找，doggie的原型物件已經被我們改成了乙個animal例項，那就是去animal例項上去找。先找animal的例項屬性，發現還是沒有 superspeack, 最後去 animal 的原型物件上去找，誒，這才找到。

（希望這張圖對大家的理解有幫助吧。）　

這就說明，我們可以通過原型鏈的方式，實現 dog 繼承 animal 的所有屬性和方法。

總結來說：就是當重寫了dog.prototype指向的原型物件後，例項的內部指標也發生了改變，指向了新的原型物件，然後就能實現類與類之間的繼承了。（但是如果在重寫原型物件之前，產生的例項，其內部指標指向的還是最初的原型物件。這個我下次再發篇文章講。js 繼承之借用建構函式繼承）

作者不才，文中若有錯誤，望請指正，避免誤人子弟。

js繼承之原型繼承

js繼承之原型式繼承

js繼承（一）原型繼承

js繼承，原型鏈繼承

js繼承之原型繼承

js繼承之 原型式繼承

js繼承（一）原型繼承

js繼承，原型鏈繼承

相關推薦

js繼承之原型式繼承