JS基礎原型物件的那些事（二）

今天講一下原型鏈以及原型鏈的關係圖。

每個物件都有乙個__proto__屬性，指向物件的原型。

ps:準確的說，是每乙個例項都有乙個[[prototype]]屬性，指向原型物件。這是乙個隱式屬性，存在但是我們的指令碼訪問不到，不過瀏覽器廠商大部分都支援乙個__proto__屬性，用來顯示指向原型，雖然能用，但__proto__不是ecma中的規範。

原型的值可以是乙個物件，也可以是null。如果它的值是乙個物件，那麼這個物件也一定有自己的原型。這樣就形成了一條線性的鏈，我們稱之為原型鏈。

當我們在物件上呼叫乙個屬性或者方法時，會先在這個物件上尋找，沒有的話就去它的原型物件上找，原型物件上沒有就去原型物件的原型物件上找，一直找到原型物件為null為止，沒有的話就是undefined。

簡而言之，物件尋找乙個屬性會沿著原型鏈向上尋找，直到原型鏈的頂端。

function person(name) 
person.prototype.sayname = function() 
var person = new person("張三")

我們先來畫乙個簡單的關於原型的關係圖

以上是例項、建構函式和原型物件三者的關係圖。

ps:prototype只是建構函式上的乙個屬性，它是乙個指標，指向原型物件，並不表示person.prototype就是原型物件。這裡將person.prototype認為是原型物件，是為了方便理解，需要注意哦。

原型物件也是物件，是物件就有__proto__屬性，指向它的原型物件。

在上乙個例子中，person.prototype就是乙個物件，這個物件可以說是原生object建構函式的例項，所以

person.prototype.__proto__ === object.prototype

object.prototype也是乙個物件，所以它也有__proto__屬性，不過它的__proto__指向null,也就是原型鏈的頂端，再往上就沒有了。

重新補充一下關係圖

看懂的我們繼續

任何函式都可以說是原生function建構函式的例項。

所以person建構函式是function建構函式的例項。

person.__proto__ === function.prototype

繼續我完善我們的關係圖

可能有人疑惑，person不是函式嗎，函式怎麼也有__proto__，函式不是只有prototype嗎？

因為函式本質也是物件啊，在js的世界裡，萬物皆物件，所以函式有__proto__沒毛病。

function.prototype也是物件，所以和person.prototype一樣，function.prototype可以說是原生object建構函式的例項，所以

function.prototype.__proto__ === object.prototype

補充我們的圖（紅色的線）

function和object都是建構函式，根據第二點任何函式都可以說是原生function建構函式的例項，那麼

function.__proto__ === function.prototype
object.__proto__ === function.prototype

完善我們的圖（藍色的線），大功告成。

恩，就是這麼神奇，function是function的例項。。。

以上就是原型鏈的關係圖，將這個圖弄懂，原型物件的知識基本就掌握了。

雖然在真實場景中，這些知識用到的沒這麼複雜，但是掌握了最基礎的知識，將來出現問題時，就能更快的找到問題的原因。

對於新手而言，原型鏈和作用域鏈經常搞混，this和靜態作用域不知道在場景中怎麼使用，確實是很頭疼的問題，但這也許就是js的魅力所在吧。有時間的話再寫一下作用域的知識~

JS基礎 原型物件的那些事（二）