弄清原型和原型鏈

enda 發布于2019-08-23 10:25 / 3043人閱讀

摘要：四條大規則原型和原型鏈，大體可以用以下幾條規則概括，弄清楚了這幾條，也就基本吃透了原型和原型鏈。上圖幫助理解吧實例的隱式原型屬性指向其構造函數的顯式原型屬性。原型相關方法判斷一個對象是否在原型鏈上可以用，判斷某一個屬性是否是自身屬性可以用。

四條大規則

原型和原型鏈，大體可以用以下幾條規則概括，弄清楚了這幾條，也就基本吃透了原型和原型鏈。

所有的引用類型都有一個__proto__屬性，屬性值是一個普通對象

所有的函數都有一個prototype屬性，屬性值也是一個普通對象

所有引用類型的__proto__屬性值指向其構造函數的prototype屬性值

當試圖得到一個對象的某個屬性值時，如果這個對象本身沒有該屬性，就會去它的__proto__（它構造函數的prototype）中查找

（為了方便起見，下文中__proto__用隱式原型代替，prototype用顯式原型代替）
舉個栗子：

// 構造函數
function Human(name) {
    this.name = name;
}
Human.prototype.introduce = function(){
    console.log("My name is", this.name);
}

var somebody = new Human("somebody");
console.log(Human.prototype); // Function
console.log(Human.prototype.constructor === Human); // true
console.log(somebody.__proto__ === Human.prototype);  // true
somebody.introduce(); // "My name is somebody"

在上述例子中，Human是構造函數，而somebody是Human的一個實例。從console輸出結果可以驗證，構造函數的顯式原型的constructor屬性指向它本身，實例的隱式原型屬性指向其構造函數的顯式原型。

在實例somebody中并沒有introduce方法，該方法實際是在Human.prototype中，由上述第四條，當試圖得到一個對象的某個屬性值時，如果這個對象本身沒有該屬性，就會去它的__proto__（它構造函數的prototype）中查找，所以somebody的introduce方法實際上是somebody.__proto__.introduce，也就是Human.prototype.introduce。

上圖幫助理解吧~

實例的隱式原型屬性指向其構造函數的顯式原型屬性。
所有的一層一層的__proto__連起來，就構成了原型鏈。例如，在Object.prototype上有一方法toString，而somebody也有，但其實somebody的toString方法并非自身所有（除非多帶帶有聲明），而是來自于somebody.__proto__.__proto__.__proto__（即Object.prototype），這一點可以通過hasOwnProperty證明。

原型相關方法

判斷一個對象是否在原型鏈上可以用instanceof，判斷某一個屬性是否是自身屬性可以用hasOwnProperty。

console.log(somebody.hasOwnProperty("name")) // true
console.log(somebody instanceof Object); // true

//語法
// obj.hasOwnProperty(prop)
// object instanceof constructor

后續再出一期與new運算符相關的還有與原型繼承、class相關的吧，排期ing。

參考閱讀

MDN: instanceof
MDN: constructor
MDN: hasOwnProperty

GPU云服務器云服務器原型原型鏈原型鏈原型鏈繼承原型鏈圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96329.html

深入理解Javascript原型關系

摘要：如下所示在規范中，已經正式把屬性添加到規范中也可以通過設置和獲取對象的原型對象對象之間的關系可以用下圖來表示但規范主要介紹了如何利用構造函數去構建原型關系。前言在軟件工程中，代碼重用的模式極為重要，因為他們可以顯著地減少軟件開發的成本。在那些主流的基于類的語言（比如Java,C++）中都是通過繼承(extend)來實現代碼復用，同時類繼承引入了一套類型規范。而JavaScript是...

ethernet 2019-08-22 14:06 評論0 收藏0
關於Javascript中的new運算符,構造函數與原型鏈一些理解

摘要：前言文章主要基于高級程序設計總結的基本重寫了全文補充知識點新增實例優化排版新增檢測方法技巧用法構造函數創建一個用護定義的對象類型的實例或具有構造函數的內置對象類型之一命令執行構造函數返回一個實例對象構造函數一個指定對象實例的類型的函數傳慘一前言文章主要基于>總結的!!!PS: 2018/05/09 基本重寫了全文,補充知識點,新增實例,優化排版PS: 2018/05/11 新增檢測...

cikenerd 2019-08-26 10:26 評論0 收藏0
詳解Object.create(null)

摘要：要添加到新對象的可枚舉新添加的屬性是其自身的屬性，而不是其原型鏈上的屬性的屬性。大家可能會注意到，第一個參數使用了。也就是說將設置成了新創建對象的原型，自然就不會有原型鏈上的屬性。至此，我相信大家已經對兩者的區別十分清楚了。在Vue和Vuex的源碼中，作者都使用了Object.create(null)來初始化一個新對象。為什么不用更簡潔的{}呢？在SegmentFault和Stack...

yanwei 2019-08-22 16:12 評論0 收藏0
JavaScript由淺及深了解原型鏈（一）

摘要：但是該方法有個缺點就是看不出該對象的類型，于是乎構造函數模式應運而生。當然，如果細心的朋友應該會發現函數名首字母大寫了，這是約定在構造函數時將首字母大寫。這時候，聰明的人應該都可以想到，將構造函數模式和原型模式組合起來就可以了。一.什么是js對象 1.簡單理解js對象在了解原型鏈之前，我們先要弄清楚什么是JavaScript的對象，JavaScript對象又由哪些組成。有人說一個程...

YorkChen 2019-08-22 16:38 評論0 收藏0
constructor, prototype, __proto__ 詳解

摘要：接下解釋和屬性同樣拿上面的代碼來解釋輸出首先給構造函數的原型對象賦給方法，由構造函數創建的實例會繼承原型對象上的方法。本文為了解決以下問題： __proto__(實際原型)和prototype(原型屬性)不一樣?。。?constructor屬性(原型對象中包含這個屬性，實例當中也同樣會繼承這個屬性) prototype屬性(constructor.prototype原型對象) __...

lifesimple 2019-08-21 10:36 評論0 收藏0