做前端開闢有段時候了，遇到過許多坎，假如要排出個先後順序，那末JavaScript的原型與對象相對逃不出TOP3。

假如說前端是海，JavaScript就是海里的水

一向以來都想寫篇文章梳理一下這塊，為了加深本身的邃曉，也為了協助後來者儘快出坑，但總覺缺乏適當的切入點，使讀者能看到清晰的途徑而非僵硬的教科書。近來看到句話“好的題目如火頭之刃，能幫你輕鬆剖開徵象直達實質”，所以本文以層層探詢解答的體式格局，試圖供應一個易於邃曉的角度。

如今的軟件開闢，很少有不是面向對象的，那末JavaScript怎樣建立對象？

一、 建立對象的要領

在傳統的面向對象編程言語（如：C++，Java等）中，都用定義類的關鍵字class，起首聲明一個類，然後再經由過程類實例化出對象實例。但在JavaScript中若完成如許邏輯的對象建立，須要先定義一個代表類的組織函數，再經由過程new運算符實行組織函數實例化出對象。

1. 對象字面量

   var object1 = { name: "object1" }

2. 組織函數法

   var ClassMethod = function() {
       this.name = "Class"
   }
   var object2 = new ClassMethod()
   // 這類體式格局建立的對象字面量
   var object3 = new Object({ name: "object3" })

   這裏提到的new運算符，後面會詳述

3. Object.create(proto)
   建立一個新對象，運用入參proto對象來供應新建立的對象的__proto__，也就入參對象時新建立對象的原型對象。

   var Parent = { name: "Parent" }
   var object4 = Object.create(Parent)

想要邃曉JavaScript原型繼續的幺蛾子，勢必要搞清晰原型對象、實例對象、組織函數以及原型鏈的觀點和關聯，接下來我只管做到表述地構造清晰，一針見血。

二、原型繼續

臨時放置一下原型鏈，我先講清晰其他三個觀點的門門道道，假如你手邊有紙筆最好，沒有在腦中設想也不龐雜。

1. 畫一個等邊三角形，從極點順時針為每一個角編號（1）、（2）、（3）
2. 个中（1）旁邊標註“原型對象”，（2）組織函數，（3）實例對象
3. 從（2）組織函數（如上節例中的ClassMethod）指向（3）實例對象（上節例中的object2）畫一條帶箭頭的線。線上說明new運算符，示意var object2 = new ClassName()。
4. 從（2）組織函數指向（1）原型對象畫一條帶箭頭的線。線上標註prototype，示意該組織函數的原型對象即是ClassName.prototype。（函數都有prototype屬性，指向它的原型對象）
5. 從（3）實例對象指向（1）原型對象畫一條帶箭頭的線。線上標註__proto__，示意該實例對象的原型對象即是object2.__proto__，連繫第4步，便有ClassName.prototype === object2.__proto__。
6. 從（1）原型對象指向（2）組織函數畫一條帶箭頭的線。線上標註constructor，示意該原型對象的組織函數即是ClassName === object2.__proto__.constructor。

關於JavaScript函數與對象自帶的屬性有一句須要畫重點的話：一切的對象都有一個__proto__屬性指向其原型對象，一切的函數都有prototype屬性，指向它的原型對象。函數實在也是一種對象，那末函數便有兩個原型對象。由於日常平凡更關注對象依據__proto__屬性，指向的原型對象所組成的原型鏈，為了辨別函數的兩個原型，便將__proto__所指的原型對象稱作隱式原型，而把prototype所指向的原型對象稱作顯現原型。

看到這裏你應當已曉得原型對象、實例對象、組織函數以及原型鏈是什麼了，然則關於為何是如許應當還比較懵，由於我也曾云云，用以往類與對象，父類與子類的觀點對比原型與實例，試圖想找出一些熟習的關聯，讓本身能夠邃曉。

人們老是習氣經由過程熟習的事物，類比去熟悉生疏的事物。這或許是一種疾速的體式格局，但這相對不是一種有用的體式格局。類比總會讓我們輕蔑邏輯推理

三、從instanceof再看原型鏈

語法花樣為object instanceof constructor，從字面上邃曉instanceof，是用來推斷object是不是為constructor組織函數實例化出的對象。但除此之外，若組織函數所指的顯現原型對象constructor.prototype存在於object的原型鏈上，效果也都會為true。

字面邃曉若干會有些誤差，請實時
查閱MDN文檔

原型鏈就是JavaScript相干對象之間，由__proto__屬性順次援用構成的有向關聯鏈，原型對象上的屬性和要領能夠被實在例對象運用。（這類有向的父子關聯鏈就具有了完成類繼續的特徵）

四、new運算符

new Foo()實行過程當中，都發生了什麼？

以下三步：

1. 建立一個繼續自Foo.prototype的新對象。
2. 實行組織函數Foo，並將this指針綁定到新建立的對象上。
3. 假如組織函數返回一個對象，則這個對象就是new運算符實行的效果；假如沒返回對象，則運用第一步建立出的新對象。

為了直觀的邃曉，這裏自定義一個函數myNew來模仿new運算符

function myNew(Foo){
    var tmp = Object.create(Foo.prototype)
    var ret = Foo.call(tmp)
    if (typeof ret === 'object') {
        return ret
    } else {
        return tmp
    }
}

五、完成繼續

在ES6中，湧現了更加直觀的語法糖情勢：
class Child extends Parent{}，但這裏我們只看看之前沒有這類語法糖是怎樣完成的。我一向有一個體味：
要想疾速的相識一個事物，就去相識它的源起流變。

起首定義一個父類Parent，以及它的一個屬性name：

function Parent() {
    this.name = 'parent'
}

接下來怎樣定義一個繼續自Parent的子類Child：

1. 組織函數體式格局

   function Child() {
       Parent.call(this)
       this.type = 'subClass' // ... 這裏還可定義些子類的屬性和要領
   }

   這類體式格局的缺點是：父類原型鏈上的屬性和要領不會被子類繼續。

2. 原型鏈體式格局

   function Child() {
       this.type = 'subClass'
   }
   Child.prototype = new Parent()

   這類體式格局彌補了子類沒法繼續父類原型鏈上屬性和要領的缺點，與此同時又引入一個新的題目：父類上的對象或數組屬性會援用傳遞給子類實例。
   比方父類上有一個數組屬性arr，現經由過程new Child()實例化出兩個實例對象c1和c2，那末c1對其arr屬性的操縱同時也會引起c2.arr的轉變，這固然不是我們想要的。

3. 組合體式格局（綜合1,2兩種體式格局）

   function Child() {
       Parent.call(this)
       this.type = 'subClass'
   }
   Child.prototype = new Parent()

   雖然處理了上述題目，但顯著看到這裏組織函數實行了兩遍，明顯有些過剩。

4. 組合優化體式格局

   function Child() {
       Parent.call(this)
       this.type = 'subClass'
   }
   Child.prototype = Parent.prototype

   這類體式格局減少了過剩的父類組織函數挪用，但子類的顯現原型會被掩蓋。此例中經由過程子類組織函數實例化一個對象：var cObj = new Child()，能夠驗證出實例對象的原型對象，是父類組織函數的顯現原型：cObj.__proto__.constructor === Parent，明顯這類體式格局照舊不很圓滿。

5. 最終體式格局

   function Child() {
       Parent.call(this)
       this.type = 'subClass'
   }
   Child.prototype = Object.create(Parent.prototype)
   Child.prototype.constructor = Child

   實例對象的__proto__屬性值老是該實例對象的組織函數的prototype屬性。這裏關於組織函數的從屬關聯存在一個易殽雜的點，我多煩瑣幾句來試圖把這塊講清晰：還記的上面我們畫的誰人三角形么？三個角離別代表組織函數、實例對象和原型對象，三條有向邊離別代表new,__proto__,prototype，依據__proto__有向邊串連起來鏈就是原型鏈。

   要詮釋清晰組織函數的從屬關聯，我們先在上面所畫的原型鏈三角形中的每一個三角形中，增加一條有向邊：從原型對象指向組織函數，這示意原型對象有一個
   constructor屬性指向它的組織函數，而該組織函數的
   prototype屬性又指向這個組織函數，因而便在部分構成了一個有向環。

   如今一切都協調了，惟獨另有一點，就是原型鏈末尾的實例對象組織函數的指向，不管經由過程new運算符照樣經由過程Object.create建立出來的實例對象的constructor屬性，都和其原型對象的constructor雷同。所以為了堅持一致性便有了上面那句Child.prototype.constructor = Child，為的是在你想要曉得一個對象是由哪一個組織函數實例化出來的，能夠依據obj.__proto__.constructor獲取到。

6. 多繼續

   function Child() {
       Parent1.call(this)
       Parent2.call(this)
   }
   Child.prototype = Object.create(Parent1.prototype)
   Object.assign(Child.prototype, Parent2.prototype)
   Child.prototype.constructor = Child

   應用Obejct.assign要領將Parent2原型上的要領複製到Child的原型。