__proto__與prototype的理解

這篇文章主要 解決的問題 是：什麼是 __proto__？什麼是 prototype？他們的關係是什麼？在原型鏈中扮演什麼角色？

proto和prototype

1. prototype是函數的一個屬性，在定義構造函數的時候自動建立，它指向函數的原型，被 __proto__指向。這個原型對象裏包含着自定義的方法屬性。
2. __proto__是對象的內部屬性，它指向構造器的prototype，對象依賴它來進行原型鏈的查詢，instanceof方法也是依賴它來判斷是否存在繼承關係。
3. prototype只能做爲構造函數的屬性，而__proto__能夠做爲任意對象的屬性。

proto、prototype和原型鏈之間的聯繫

看一段代碼：

function Foo(name) { this.name = name };
 Foo.prototype.age = 18;
 let student = new Foo("holy");

咱們經過一張圖來表示這段代碼構建的原型鏈：

這張圖中原型鏈可分紅兩部分：

student ---> Foo.prototype ---> Object.prototype ---> null

Foo ---> Function.prototype ---> Object.prototype ---> null

咱們從 對象student 看起：根據 概念3 , prototype 只能做爲構造函數的屬性，__proto__只能做爲對象的屬性。因此對象sutdent 只有__proto__，沒有prototype。

student.prototype;
undefined

而 student對象 是Foo構造函數的一個實例，根據 概念2 它的__proto__指向Foo.prototype

student.__ptoto__ == Foo.prototype;
true

覺得 Foo.prototype 是一個對象，因此 Foo.prototype.__proto__指向 Object.prototype

Foo.prototype.__proto__ == Object.prototype;
true

再來看第二部分：
Foo 是一個函數，因此 Foo.__proto__指向 Function.prototype

Foo.__proto__ == Function.prototype
true

再 JavaScript 中函數都是第一公民，並且函數也是對象，因此Function.prototype.__proto__指向 Object.prototype

Function.prototype.__proto__ == Object.prototype
true

原型鏈的工做流程

1. student.name 在student中找到 name屬性，返回「holy」；
2. student.age 在student中未找到，因而經過student.__proto__在Foo.prototype中找到，返回 18；
3. student.toString() 在student中未找到，接着經過student.__proto__在Foo.prototype中尋找，未找到，繼續經過Foo.prototype.__proto__在Object.prototype中尋找，找到了，返回‘[object object]’。
4. student.getWeight() 依次在student、Foo.prototype、Object.prototype中尋找，均未找到，拋出錯誤。