幾年前初入前端溉旋，被 JavaScript 原型深深困擾畸冲，雖然平時(shí)接觸到的機(jī)會(huì)可能不多，但是每每面試必然會(huì)被問及观腊。所以就去翻了紅寶書邑闲，搞懂了這個(gè)東西。時(shí)隔兩年梧油，再翻紅寶書苫耸，仍能感覺到其內(nèi)容有些用詞不當(dāng)，略有晦澀之處儡陨。特意整理了一段易懂的關(guān)于 JavaScript 原型的說明褪子。希望能幫助到初接觸 JavaScript 的同學(xué)。
看完本文你將了解原型骗村、原型鏈嫌褪、hasOwnProperty、in胚股、instanceof 的本質(zhì)是什么
首先笼痛，為什么我們需要原型？
假設(shè)有一個(gè)構(gòu)造函數(shù) Person
function Person (name, age, job) {
this.name = name
this.age = age
this.job = job
this.sayName = () => { alert(this.name) } // 這里會(huì)導(dǎo)致每次實(shí)例化都創(chuàng)建了一個(gè)新的方法
}
此時(shí)如果有兩個(gè) Person 實(shí)例 person1 和 person2，那么它們的 sayName 方法顯然是兩個(gè)獨(dú)立的函數(shù)缨伊。沒有必要摘刑，所以此時(shí)你肯定想到可以把 sayName 方法移到外面單獨(dú)定義，然后 this.sayName 去引用它刻坊，這樣確實(shí)可以枷恕，但是不優(yōu)雅。所以我們來引入原型模式解決這個(gè)問題谭胚。
每一個(gè)函數(shù)都有一個(gè)原型（prototype）屬性活尊，這個(gè)屬性指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含由這個(gè)函數(shù)產(chǎn)生的所有實(shí)例之間共享的屬性和方法漏益，也就是在 prototype 上的屬性和方法均可被實(shí)例所共享。例如上面的代碼可以改寫成：
Person.prototype.sayName = () => { alert(this.name) }
多說一句深胳，prototype 屬性會(huì)自動(dòng)包含一個(gè) constructor 屬性绰疤，指向其所屬的函數(shù)，即 Person.prototype.constructor === Person舞终，這里補(bǔ)充一下轻庆，為啥要包含一個(gè) constructor 屬性，因?yàn)閷?shí)例本身是沒有 constructor 屬性的敛劝，那么訪問實(shí)例 person.constructor 時(shí)得返回 Person 呀（因?yàn)?person 是由構(gòu)造函數(shù) Person 實(shí)例化出來的實(shí)例余爆，所以通常我們把 Person 稱為 person 的構(gòu)造函數(shù)），所以通過原型（后面會(huì)說）找到了在 Person 原型（prototype）對(duì)象上的 constructor 屬性夸盟，至于其他方法蛾方，則都是從 Object 繼承而來的，這里暫停一下上陕，先去看實(shí)例怎么繼承到 prototype 上的方法的桩砰。實(shí)例不是函數(shù)，沒有 prototype 屬性释簿，它是怎么找到 sayName 函數(shù)的呢亚隅？
那是因?yàn)閯?chuàng)建一個(gè)實(shí)例的時(shí)候，該實(shí)例的內(nèi)部將包含一個(gè)內(nèi)部屬性（可以通過 __proto__ 訪問）庶溶，這個(gè)連接是存在于實(shí)例和構(gòu)造函數(shù)的 prototype 屬性之間煮纵，而不是存在于實(shí)例與構(gòu)造函數(shù)之間。即 person.__proto__ === Person.prototype偏螺。
再多說一句行疏，每個(gè)對(duì)象都有 __proto__ 屬性，所以很容易想到套像，Person.__proto__ 就是 Person 的構(gòu)造函數(shù) Function 的 prototype隘擎，（因?yàn)?Person 本質(zhì)上是個(gè) function，是由 Function 實(shí)例化出來的）凉夯，即 Person.__proto__ === Function.prototype
最后货葬，每當(dāng)代碼讀取到某個(gè)屬性時(shí)采幌，都會(huì)執(zhí)行一次搜索。首先從對(duì)象實(shí)例本身開始震桶，如果找到了休傍，就返回。如果沒有找到蹲姐，就去 __proto__ 對(duì)象上面找磨取，也就是找到了其構(gòu)造函數(shù)的 prototype 上，如果還沒有怎么辦柴墩，前面說了每個(gè)對(duì)象都有 __proto__ 屬性忙厌，所以繼續(xù)順著 __proto__ 向上找，一直找到 __proto__ 為 null江咳。
常用的 object.hasOwnProperty('keyName') 就是判斷 keyName 是不是存在 object 的實(shí)例上
keyName in object逢净，則只要 object 中有 keyName 即可，無論它是來自原型還是來自實(shí)例歼指，我們可以擴(kuò)展一下爹土，怎么判斷一個(gè)屬性是來自原型：
function hasPrototypeProperty(object, keyName) {
return !object.hasOwnProperty(keyName) && (keyName in object);
}
instanceof 本質(zhì)上是用來測試一個(gè)對(duì)象在其原型鏈中是否存在它的構(gòu)造函數(shù)的 prototype 屬性：
function Person () {}
Person.prototype = {} // 這里的重新賦值導(dǎo)致 constructor 丟失
const person = new Person()
person instanceof Person // 仍然為 true，和 constructor 無關(guān)踩身，只要 Person.prototype 在就行了
Person.prototype = {} // 所以這里我們對(duì) Person.prototype 重新賦值胀茵，而 person.__proto__ 仍然指向的是之前的原型
person instanceof Person // false
原型對(duì)象的問題在于如果對(duì)象上的屬性值類型是引用類型，例如一個(gè)數(shù)組挟阻，那么如果在一個(gè)實(shí)例中對(duì)這個(gè)數(shù)組進(jìn)行了 push 等操作琼娘，會(huì)影響到其他實(shí)例。所以一般沒有人會(huì)完全使用原型模式附鸽，通常都是組合使用函數(shù)模式和原型模式轨奄。這種方法是使用最廣泛，認(rèn)同度最高的一種方式拒炎。
function Person (name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ['Shelby', 'Court'] // 對(duì)于數(shù)組對(duì)象等引用類型挪拟，通常掛到實(shí)例上而不是原型上
}
Person.prototype = {
constructor: Person,
sayName: function () {
alert(this.name)
}
}
