js中關於原型鏈與繼承的理解

js中的原型鍊是比較難理解的部分知識，而繼承又是依賴原型鏈，所以原型鍊是我們必須去掌握的。在學習原型鏈之前，我們需要先去介紹一下原型。建議這部分重在理解，不建議死記硬背。

---

1、原型

js中只有函數物件才有原型，原型也是物件。例如，我們建立一個save函數，透過typeof來查看其類型，傳回值是”object”，說明其實一個物件。

#                                      圖1 函數中1 中函數物件中
那麼，函數的原型包含哪些內容呢？透過列印輸出，我們可以看到，其原型包含兩部分，一是constructor,二是proto。我們先了解下constructor,後文會介紹proto。

圖2 函數物件的原型
學過java的都知道constructor是建構器的意思，其包含有關建構器的一些信息，例如參數、呼叫者等。
前面說過只有函數物件才有原型，那麼普通物件有沒有呢？下面透過實例驗證，透過save建構出一個物件fileSave。

圖3 普通物件
從上面的例子看出，普通物件是沒有原型的，但是其有proto屬性。
小結：從以上分析，我們學到函數物件有原型屬性，普通物件沒有原型屬性。

2、原型鏈

原型鏈的實作是依賴proto屬性的，可以理解為C語言中的指針，java中的引用。在js中，proto指向的是什麼呢？還是拋出實例，下面透過列印輸出fileSave的proto屬性：

圖4 物件的proto
你是不是有所發現， fileSave的proto值和圖2中的save函數物件的prototype一樣，也就是proto指向save的原型。我們知道fileSave物件是透過new save();建立的，故我們得出結論fileSave的proto指向其建構函式物件的原型。為了驗證結果，我們再次透過save建立一個物件imageSave，看看它的proto屬性值。

我們再次發現，imageSave的proto指向了save的原型。因此，我們可以知道物件的proto指向其建構函數的原型。那麼，save也是一個對象，它的prto應該指向它的建構子的原型，也就是Function的原型。

另外，我們從第一節就知道原型也是對象，其proto屬性的指向又是如何呢？以實例說話，下方列印出save.prototype.proto值。

圖5 save.prototype.proto
從圖5知，save.prototype.proto的值是Object的原型。我們很好奇，Obejct.prototype 的proto的值，印出來看看。

是null,可以理解，畢竟其實最頂層的物件啦。
從上面的分析得出下面的鏈圖：

圖6 原型鏈
小結：透過這一節的分析，我們學到原型鏈的實現是依靠物件的proto屬性。如果透過函數物件建立一個對象，那麼該物件的proto屬性就指向其建構函數的原型。
3、繼承
在講繼承之前，我們先來學習下屬性的查找。在js中，其會依照原型鏈去找屬性，如果自己沒有，就依照proto屬性依序往上找。下面我們，先寫一段實例程式碼。

save.fileName = "oo"save.prototype.fileName = "lili";fileSave.fileName = "haha";

這時我們如果列印fileSave.fileName的值，很明顯得到的是「haha」。但是如果我把fileSave.fileName = “haha”;去掉，再列印會輸出什麼呢？

從列印結果，我們知道會根據proto屬性去找fileName屬性，也就是根據圖5的鍊圖去查詢所需的屬性。在這裡，如果沒有save.prototype.fileName = “lili”;這段賦值程式碼，印出來的就是undefined,因為原型鏈中沒有對應的屬性。有人可能會說，為啥不會輸出「oo」,的確從程式碼中看到save.fileName = 「oo」這段賦值程式碼，但是我們需要知道save是個函數對象，當執行這段程式碼時，finName會在constructor下，並不在原型中，類似java中的靜態屬性（在這裡不能透過實例物件存取）。
記住：透過普通物件呼叫屬性，該查找只會在prototype的屬性中查找，並不會在constructor中查找。如果在save的原型中沒有找到，又會到save.proto中查找，依序進行下去。
如果知道屬性尋找方式，那麼實作繼承就很簡單了。例如我們創建一個空物件saveDisk,如果我想訪問save中的fileName，我們只需要把saveDisk的proto的值等於save的原型即可（簡單理解為把兩個不相干的鐵鏈接在一起）。

saveDisk._proto_ = save.prototype

#

以上是js中關於原型鏈與繼承的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！