原型鏈中的prototype proto

先來看一張圖，這張圖可以說是圍繞以下**完整的描述了各物件之間的關係。接下來我們來看看如何一步步畫出這張圖。

functionfoo(){};
var foo = new foo();

首先，明確幾點概念（現在不懂沒關係），後面會不斷提到：

過程1：只要建立乙個函式foo，就會為該函式建立乙個prototype屬性，這個屬性指向函式的原型物件；

過程2：原型物件會預設去取得constructor屬性，指向建構函式。

過程3：當呼叫建構函式建立乙個新例項foo後，該例項的內部將包含乙個指標__proto__，指向建構函式的原型物件。

以上兩點，出現了3種物件：建構函式、建構函式的原型、建構函式建立的例項；出現了3種屬性：constructor、prototype、__proto__。接下來，我們就圍繞這3個物件和3個屬性展開討論。

1）先來看看第一行**發生了什麼：

functionfoo(){};
console.log(foo.prototype.constructor === foo);//true

第一行**定義了乙個函式，此時就發生了過程1和過程2，如圖：

（這裡的foo的原型物件一般表示為foo.prototype，但為了更清晰理解，我們就稱之為foo的原型物件）

2）再來看看第二行**

functionfoo(){};
var foo = newfoo();
console.log(foo.__proto__ === foo.prototype);//true

第二行**建立了乙個例項，發生了過程3，如圖：

仔細觀察，可以發現例項foo與建構函式之間是沒有直接聯絡的，所有關係都是通過foo的原型物件連線起來的。（這一點一定要明確）

3）foo繼承constructor屬性

functionfoo(){};
var foo = newfoo();
console.log(foo.constructor === foo);//true
console.log(foo.hasownproperty("constructor"));//false

例項物件foo與foo之間沒有直接聯絡，但foo繼承了foo的原型物件的constructor的屬性，有了間接的聯絡。通過hasownproperty函式（判斷物件是否擁有某個屬性，不檢查原型鏈）可以看出，例項物件foo本身沒有constructor屬性。

小結：到這裡，部落格最開始的兩行**的所有過程就結束了。不過這只是露在外面的冰山一角，我們來看看冰山下面有什麼。

我們知道，所有引用物件都預設繼承了object，所有函式的預設原型都是object的例項。

1）同上，object與其原型物件之間也存在如下關係

2）既然函式的預設原型都是object的例項，那麼類似以上建立foo例項時的過程，自然有了以下關係：

注意一點，此時foo的原型物件有自己的constructor屬性，自然就不用繼承object原型物件的了，所以仍然指向foo，而不是object。

3）object的原型物件的原型

object的原型物件已經是最根部了，所以它沒有__proto__屬性。

我們知道，函式也是物件，任何函式都可以看作是由建構函式function例項化的物件。

1）同上，function與其原型物件之間也存在如下關係

2）如果將foo函式看作例項物件的話，其建構函式就是function()，原型物件自然就是function的原型物件；同樣object函式看作例項物件的話，其建構函式就是function()，原型物件自然也是function的原型物件。

3）function的__proto__指標

function自身可以看作通過建構函式function例項化的物件，所以function的__proto__指標指向function的原型物件

4）function的原型物件的__proto__指標

如果function的原型物件看作例項物件的話，如前所述所有物件都可看作是object的例項化物件，所以function的原型物件的__proto__指向object的原型物件。

到這裡，建立乙個例項物件foo時內部的聯絡就都說清楚了。觀察圖可以發現，只有乙個入口（foo），乙個出口（null），所以每乙個物件都是同乙個起源。