轉載 最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（一）

轉自：https://www.jianshu.com/p/dee9f8b14771

 

三篇文章都更新完畢，完整的剖析了 JS 原型與原型鏈，但願經過這些教程能讓你對 Javascript 這門語言理解的更透徹！

---

一. 普通對象與函數對象

JavaScript 中，萬物皆對象！但對象也是有區別的。分爲普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下面舉例說明

var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object 

在上面的例子中 o1 o2 o3 爲普通對象，f1 f2 f3 爲函數對象。怎麼區分，其實很簡單，凡是經過 new Function() 建立的對象都是函數對象，其餘的都是普通對象。f1,f2,歸根結底都是經過 new Function()的方式進行建立的。Function Object 也都是經過 New Function()建立的。

必定要分清楚普通對象和函數對象，下面咱們會經常用到它。

二. 構造函數

咱們先複習一下構造函數的知識：

function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name) } } var person1 = new Person('Zaxlct', 28, 'Software Engineer'); var person2 = new Person('Mick', 23, 'Doctor'); 

上面的例子中 person1 和 person2 都是 Person 的實例。這兩個實例都有一個 constructor （構造函數）屬性，該屬性（是一個指針）指向 Person。 即：

console.log(person1.constructor == Person); //true console.log(person2.constructor == Person); //true 

咱們要記住兩個概念（構造函數，實例）：
person1 和 person2 都是 構造函數 Person 的實例
一個公式：
實例的構造函數屬性（constructor）指向構造函數。

三. 原型對象

在 JavaScript 中，每當定義一個對象（函數也是對象）時候，對象中都會包含一些預約義的屬性。其中每一個函數對象都有一個prototype 屬性，這個屬性指向函數的原型對象。（先用無論什麼是 __proto__ 第二節的課程會詳細的剖析）

function Person() {} Person.prototype.name = 'Zaxlct'; Person.prototype.age = 28; Person.prototype.job = 'Software Engineer'; Person.prototype.sayName = function() { alert(this.name); } var person1 = new Person(); person1.sayName(); // 'Zaxlct' var person2 = new Person(); person2.sayName(); // 'Zaxlct' console.log(person1.sayName == person2.sayName); //true 

咱們獲得了本文第一個「定律」：

每一個對象都有 __proto__ 屬性，但只有函數對象纔有 prototype 屬性

---

那什麼是原型對象呢？
咱們把上面的例子改一改你就會明白了：

Person.prototype = {
   name: 'Zaxlct', age: 28, job: 'Software Engineer', sayName: function() { alert(this.name); } } 

原型對象，顧名思義，它就是一個普通對象（廢話 = =!）。從如今開始你要緊緊記住原型對象就是 Person.prototype ，若是你仍是懼怕它，那就把它想一想成一個字母 A： var A = Person.prototype

---

在上面咱們給 A 添加了 四個屬性：name、age、job、sayName。其實它還有一個默認的屬性：constructor

在默認狀況下，全部的原型對象都會自動得到一個 constructor（構造函數）屬性，這個屬性（是一個指針）指向 prototype 屬性所在的函數（Person）

上面這句話有點拗口，咱們「翻譯」一下：A 有一個默認的 constructor 屬性，這個屬性是一個指針，指向 Person。即：
Person.prototype.constructor == Person

---

在上面第二小節《構造函數》裏，咱們知道實例的構造函數屬性（constructor）指向構造函數 ：person1.constructor == Person

這兩個「公式」好像有點聯繫：

person1.constructor == Person
Person.prototype.constructor == Person

person1 爲何有 constructor 屬性？那是由於 person1 是 Person 的實例。
那 Person.prototype 爲何有 constructor 屬性？？同理， Person.prototype （你把它想象成 A） 也是Person 的實例。
也就是在 Person 建立的時候，建立了一個它的實例對象並賦值給它的 prototype，基本過程以下：

var A = new Person(); Person.prototype = A; 

結論：原型對象（Person.prototype）是 構造函數（Person）的一個實例。

---

原型對象其實就是普通對象（但 Function.prototype 除外，它是函數對象，但它很特殊，他沒有prototype屬性（前面說道函數對象都有prototype屬性））。看下面的例子：

function Person(){}; console.log(Person.prototype) //Person{} console.log(typeof Person.prototype) //Object console.log(typeof Function.prototype) // Function，這個特殊 console.log(typeof Object.prototype) // Object console.log(typeof Function.prototype.prototype) //undefined 

Function.prototype 爲何是函數對象呢？

var A = new Function (); Function.prototype = A; 

上文提到凡是經過 new Function( ) 產生的對象都是函數對象。由於 A 是函數對象，因此Function.prototype 是函數對象。

那原型對象是用來作什麼的呢？主要做用是用於繼承。舉個例子：

var Person = function(name){ this.name = name; // tip: 當函數執行時這個 this 指的是誰？ }; Person.prototype.getName = function(){ return this.name; // tip: 當函數執行時這個 this 指的是誰？ } var person1 = new person('Mick'); person1.getName(); //Mick 

從這個例子能夠看出，經過給 Person.prototype 設置了一個函數對象的屬性，那有 Person 的實例（person1）出來的普通對象就繼承了這個屬性。具體是怎麼實現的繼承，就要講到下面的原型鏈了。

小問題，上面兩個 this 都指向誰？

var person1 = new person('Mick'); person1.name = 'Mick'; // 此時 person1 已經有 name 這個屬性了 person1.getName(); //Mick 

故兩次 this 在函數執行時都指向 person1。

---

2017-10-27 更新：
下面的評論有噴子噴我：「null 沒有 _proto_」，下面解釋一下：
null 是一個獨立的數據類型，爲何typeof(null)的值是"object"？

1. null不是一個空引用, 而是一個原始值, 參考ECMAScript5.1中文版** 4.3.11節; 它只是指望此處將引用一個對象, 注意是"指望", 參考 null - JavaScript**.
2. typeof null結果是object, 這是個歷史遺留bug, 參考 typeof - JavaScript**
3. 在ECMA6中, 曾經有提案爲歷史平凡, 將type null的值糾正爲null, 但最後提案被拒了. 理由是歷史遺留代碼太多, 不想得罪人, 不如繼續將錯就錯當和事老, 參考 harmony:typeof_null [ES Wiki]
   做者：克荷林連接：https://www.zhihu.com/question/21691758/answer/987822

寫個教程不容易，遇到噴子真心不爽。噴子無論那麼多，哪怕文章是免費看的。他們只要抓住你一點點的小失誤，就興奮的噼裏啪啦一頓噴。

---

彆着急走，關於原型與原型鏈還有第二篇第三篇呢~
第二篇已更新，點擊進入
第三篇已更新，點擊進入

---

本文部分參照了 JS原型與原型鏈終極詳解 （感謝原做者）（侵立刪）
和《JavaScript 高級程序設計》第三版

但願經過這一系列課程，能幫助你完全搞明白 JavaScript 的原型與原型鏈 ：）

做者：Yi罐可樂 連接：https://www.jianshu.com/p/dee9f8b14771 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。