用自己的方式（圖）理解constructor、prototype、__proto__和原型鏈

② 可以通過物件.constructor拿到建立該例項物件的建構函式。

console.log(person1.constructor) // 結果輸出: [Function: Person]
複製程式碼

③ Function函式和Object函式是JS內建物件，也叫內部類，JS自己封裝好的類，所以很多莫名其妙、意想不到的設定其實無需過分糾結，官方動作，神仙操作。

④ 原型物件即例項物件自己建構函式內的prototype物件。

一、先理解為什麼“函式即物件”

先看以下程式碼：

function Person() {...}
console.log(Person.constructor) // 輸出結果:[Function: Function]
// 上面是普通函式宣告方法，生成具名函式，在宣告時就已經生成物件模型。
console.log(Function.constructor) // 輸出結果:[Function: Function]
console.log(Object.constructor) // 輸出結果:[Function: Function]
複製程式碼

上面的程式碼構造了一個Person函式，我們能看出那些資訊？

1. Person雖被宣告為一個函式，但它同樣可以通過Person.constructor輸出內容。輸出內容說明Function函式是Person函式[普通宣告的函式]的建構函式。
2. Function函式同時是自己的建構函式。
3. Function函式同樣是Object這類內建物件的建構函式。

// 使用Function構造器建立Function物件
var Person = new Function('...')
// 幾乎？因為這種方式生成的函式是匿名函式[anonymous]，並且只在真正呼叫時才生成物件模型。複製程式碼

在JS裡，函式和物件包含關係如下：

總結：物件由函式建立，函式都是Function物件例項。

二、constructor其實很純粹

先忽略__proto__和prototype，直接理解constructor，程式碼例子：

function Person() {}
var person1 = new Person()
var person2 = new Person()
複製程式碼

下面一張圖就畫出了它們constructor的指向（忽略了__proto__和prototype）：

圖中，藍色底是Person的例項物件，而Person、Function是函式（也是物件）。

首先，我們已經知道每個物件都可以通過物件.constructor指向建立該物件的建構函式。我們先假設每個物件上都有這麼個constructor屬性，然後理解如下：

注意：constructor屬性不一定是物件本身的屬性，這裡只為方便理解將其泛化成物件本身屬性，所以用虛線框，第三大點細講。

1. person1與person2是Person物件的例項，他們的constructor指向建立它們的建構函式，即Person函式；
2. Person是函式，但同時也是Function例項物件，它的constructor指向建立它的建構函式，即Function函式；
3. 至於Function函式，它是JS的內建物件，在第一點我們就已經知道它的建構函式是它自身，所以內部constructor屬性指向自己。

所以constructor屬性其實就是一個拿來儲存自己建構函式引用的屬性，沒有其他特殊的地方。

在接下來的所有例子都將把Function物件視為Function物件自己的例項物件，通過去掉它的特殊性來更好理解相關概念。

三、prototype是為何而出現

上一步理解是很容易的，然後這時要求你去給Person的兩個例項物件加上一個效果相同的方法，你寫了以下程式碼：

// 下面是給person1和person2例項新增了同一個效果的方法sayHello
person1.sayHello = function() {
    console.log('Hello!')
}
person2.sayHello = function() {
    console.log('Hello!')
}
console.log(person1.sayHello === person2.sayHello) // false，它們不是同一個方法，各自佔有記憶體複製程式碼

圖示如下：

當你去對比這兩個方法的時候，你會發現它們只是效果相同、名字相同，本質上卻是各自都佔用了部分記憶體的不同方法。這時候就出問題了，如果這時候有千千萬萬個例項（誇張）要這樣效果同樣的方法，那記憶體豈不是要炸。這時，prototype就出現解決問題了。

當需要為大量例項新增相同效果的方法時，可以將它們存放在prototype物件中，並將該prototype物件放在這些例項的建構函式上，達到共享、公用的效果。程式碼如下：

Person.prototype.sayHello = function() {
    console.log('Hello!')
}
console.log(person1.sayHello === person2.sayHello) // true，同一個方法複製程式碼

圖示如下：

而之所以這種形式可以減少記憶體的浪費，是由於無需再拿出部分記憶體為同一類的例項單純建立相關同一效果的屬性或方法，而可以直接去建構函式的prototype物件上找並呼叫。

總結：prototype物件用於放某同一型別例項的共享屬性和方法，實質上是為了記憶體著想。

講到這裡，你需要知道的是，所有函式本身是Function函式的例項物件，所以Function函式中同樣會有一個prototype物件放它自己例項物件的共享屬性和方法。所以上面的圖示是不完整的，應改成下圖：

其實裡面的sayHello也是個函式，也有自己的prototype，但不畫出來了，免得頭疼。

注意：接下來的用【原型物件】表示【建立自己的建構函式內部的prototype】！

四、真正的constructor屬性藏在哪

看到上面，有些小夥伴就頭疼了，你說的constructor屬性為什麼我就沒在console出來的物件資料中看到呢？

思考個問題：new Person( )出來的千千萬萬個例項中如果都有constructor屬性，並且都指向建立自己的建構函式，那豈不又出現了第三點的問題，它們都擁有一個效果相同但卻都各自佔用一部分記憶體的屬性？

我相信你們懂我的意思了，constructor是完全可以被當成一個共享屬性存放在原型物件中，作用也依然是指向自己的建構函式，而實際上也是這麼處理的。物件的constructor屬性就是被當做共享屬性放在它們的原型物件中，即下圖：

總結：預設constructor實際上是被當做共享屬性放在它們的原型物件中。

這時候有人會拿個反例來問：如果是共享屬性，那我將兩個例項其中一個屬性改了，為啥第二個例項沒同步？如下面程式碼：

function Person() {}
var person1 = new Person()
var person2 = new Person()
console.log(person1.constructor) // [Function: Person]
console.log(person2.constructor) // [Function: Person]
person1.constructor = Function
console.log(person1.constructor) // [Function: Function]
console.log(person2.constructor) // [Function: Person] ！不是同步為[Function: Function]複製程式碼

這個是因為person1.constructor = Function改的並不是原型物件上的共享屬性constructor，而是給例項person1加了一個constructor屬性。如下：

console.log(person1) // 結果：Function { constructor: [Function: Function] }複製程式碼

你可以看到person1例項中多了constructor屬性。它原型物件上的constructor是沒有改的。

嗯。嗯？嗯？！搞事？！! 這下共享屬效能理解了，但上面的圖解明顯會造成很大的問題，我們根本不能通過一個物件.constructor找回建立自己的建構函式（之間沒有箭頭連結）！

好的，不急，第四點只是告訴你為什麼constructor要待在建立自己的建構函式prototype上。接下來是該__proto__屬性亮相了。

五、__proto__讓例項能找到自己的原型物件

帶著第四點的疑問，我們如果要去解決這個問題，我們自然會想到在物件內部建立一個屬性直接指向自己的原型物件，那就可以找到共享屬性constructor了，也就是下面的關係：

1. 例項物件.__proto__ = 建立自己的建構函式內部的prototype（原型物件）
2. 例項物件.__proto__.constructor = 建立自己的建構函式

上面說的__proto__屬性實際上也的確是這樣的設定的，物件的__proto__屬性就是指向自己的原型物件。這裡要注意，因為JS內所有函式都是Function函式的例項物件，所以Person函式也有個__proto__屬性指向自己的原型物件，即Function函式的prototype。至於Function函式為何有個__proto__屬性指向自己（藍色箭頭）也不用解釋了吧，它拿自身作為自己的建構函式，反正就是個特例，不講道理。

疑惑來了：例項物件.constructor 等於 例項物件.__proto__.constructor？

這個就是JS內部的操作了，當在一個例項物件上找不到某個屬性時，JS就會去它的原型物件上找是否有相關的共享屬性或方法，所以上面的例子中，person1物件內部雖然沒有自己的constructor屬性，但它的原型物件上有，所以能實現我們上面提到的效果。當然後面還涉及原型鏈，你只要知道上面一句話能暫時回答這個問題就好。

的確，它也是個物件，也的確有個__proto__指向自己的原型物件。那我們嘗試用程式碼找出它的建構函式，如下：

function Person() {}
console.log(Person.prototype.__proto__.constructor) // [Function: Object]複製程式碼

因為__proto__指向原型物件，原型物件中的constructor又指向建構函式，所以Person.prototype.__proto__.constructor指向的就是Person中prototype物件的建構函式，上面的輸出結果說明了prototype的建構函式就是Object函式（物件）。

總結：這麼說的話其實函式內的prototype也不過是個普通的物件，並且預設也都是Object物件的例項。

下面一張圖就畫出了文章例子中所有__proto__指向，我們試試從中找出它的貓膩。

貓膩一、所有函式的__proto__指向他們的原型物件，即Function函式的prototype物件

function GrandFather() {
    this.name = 'GrandFather'
}
function Father() {
    this.age = 32
}
Father.prototype = new GrandFather() // Father函式改變自己的prototype指向
function Son() {}
Son.prototype = new Father() // Son函式改變自己的prototype指向

var son = new Son()
console.log(son.name) // 結果輸出：GrandFather
console.log(son.age)  // 結果輸出：32
console.log(Son.prototype.constructor) // 結果輸出：[Function: GrandFather]複製程式碼

相關指向圖如下：