摘要：譯者注根據(jù)定義，沒(méi)有原型，并作為這個(gè)原型鏈中的最后一個(gè)環(huán)節(jié)。由于這個(gè)屬性不標(biāo)準(zhǔn)，因此一般不提倡使用。中用函數(shù)獲得一個(gè)對(duì)象的。

溫馨提示：作者的爬坑記錄，對(duì)你等大神完全沒(méi)有價(jià)值，別在我這浪費(fèi)生命

在上一篇博文javascript對(duì)象不完全探索記錄03：小伙子，你對(duì)象咋來(lái)的？上篇，中大概說(shuō)了說(shuō)在js中，比較好理解的對(duì)象創(chuàng)建方式，分別是直接定義／字面量，和調(diào)用構(gòu)造函數(shù)

在一眾博文及書中，有一個(gè)高級(jí)／不好看明白的方式，比上面這兩種更收到推崇，那就是大名鼎鼎的原型方式，看到這個(gè)詞，我表示不是我謙虛，是真懵逼，啥原型，什么原型，誰(shuí)的原型？現(xiàn)看看別人給的例子

function Car() {
}

Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car();
var oCar2 = new Car();

源自ECMAScript 定義類或?qū)ο?- W3school

別說(shuō)，還真有那么點(diǎn)眼熟，這種對(duì)象名稱，后面跟一個(gè)prototype的寫法，一直以來(lái)是我一個(gè)重要懵逼來(lái)源，話說(shuō)這詞，不就是原型的意思嗎？

prototype
英 [?pr??t?ta?p]   美 [?pro?t?ta?p]  
n.
原型，雛形，藍(lán)本

哈，在這等著我呢，其實(shí)認(rèn)真一看這句Car.prototype.color = "blue";的語(yǔ)法意思是給Car的prototype的color賦值，翻譯一下就是給Car的原型中的color屬性賦值，所以說(shuō)是不是能理解為原型也就是prototype是對(duì)象的一個(gè)屬性呢？還是從頭了解吧

提到原型，就不能不提到j(luò)avascript中的一個(gè)重要的懵逼概念 - 原型鏈

每個(gè)對(duì)象都有一個(gè)私有屬性（稱之為 [[Prototype]]），它持有一個(gè)連接到另一個(gè)稱為其 prototype 對(duì)象（原型對(duì)象）的鏈接。該 prototype 對(duì)象又具有一個(gè)自己的原型，層層向上直到一個(gè)對(duì)象的原型為 null。（譯者注：Object.getPrototypeOf(Object.prototype) === null; // true）根據(jù)定義，null 沒(méi)有原型，并作為這個(gè)原型鏈中的最后一個(gè)環(huán)節(jié)。
源自MDN Web docs - Web技術(shù)文檔／javascript／繼承與原型鏈

這段話我注意到的有幾個(gè)關(guān)鍵詞：每個(gè)對(duì)象，私有屬性，鏈接，層層向上

用直白的話描述一下，在javascript中任何一個(gè)對(duì)象都有一個(gè)叫做原型對(duì)象的對(duì)象，這個(gè)原型對(duì)象就是傳說(shuō)中的prototype，而指向原型對(duì)象的鏈接／指針／箭頭／->/都存在對(duì)象內(nèi)部的一個(gè)私有屬性中[[Prototype]]中（*見(jiàn)注1）

也就是說(shuō)對(duì)象的[[Prototype]]中并不是直接存了原型對(duì)象，而是存著一個(gè)指向原型對(duì)象的鏈接//這也就使得其是動(dòng)態(tài)的-待研究

由此可以想到的，既然每個(gè)對(duì)象都有原型對(duì)象，每個(gè)對(duì)象也都可以作為其他對(duì)象的原型對(duì)象，那么就會(huì)形成一個(gè)由[[Prototype]]屬性組成的鏈，這就是傳說(shuō)中的原型鏈了，而利用原型鏈，對(duì)象可以訪問(wèn)其原型對(duì)象的屬性及方法

*注1
[[prototype]]是一個(gè)隱藏屬性，但很多瀏覽器都給每一個(gè)對(duì)象提供.__proto__這一屬性，這個(gè)屬性就是上文反復(fù)提到的該對(duì)象的[[prototype]]。由于這個(gè)屬性不標(biāo)準(zhǔn)，因此一般不提倡使用。ES5中用Object.getPrototypeOf函數(shù)獲得一個(gè)對(duì)象的[[prototype]]。ES6中，使用Object.setPrototypeOf可以直接修改一個(gè)對(duì)象的[[prototype]]
源自知乎問(wèn)題 - js中__proto__和prototype的區(qū)別和關(guān)系？ - 知乎用戶的回答

換句話說(shuō)，任何一個(gè)對(duì)象，都是在另一個(gè)被叫做原型對(duì)象的基礎(chǔ)之上被創(chuàng)建出來(lái)的，這也就是所謂的原型了

就像我們知道的，在學(xué)園都市里有好多少女們／對(duì)象，她們各自有不同名字，頭發(fā)顏色，以及超能力，她們可以展現(xiàn)自己的超能力，我們建立一個(gè)名叫GirlFriend()的構(gòu)造函數(shù)，來(lái)記錄記錄

function GirlFriend(name,hairColor,power){
    this.name = name;
    this.hairColor = hairColor;
    this.showPower = function(){
        console.log(power)
    }
}

記錄／實(shí)例化炮姐和黑子

var mikoto = new GirlFriend("Mikoto","brown","BiliBili");
var kuroko = new GirlFriend("Kuroko","black","Telesport");
mikoto.showPower();//BiliBili
kuroko.showPower();//Telesport

直到這里一切都很正常，但是卻發(fā)現(xiàn)炮姐不是一個(gè)人！有人處于某種原因克隆了好多炮姐,如何記錄炮姐的妹妹們呢，我們創(chuàng)建一個(gè)構(gòu)造函數(shù)Sister()用于記錄炮姐的妹妹們

function Sister(level,number){
    this.level = level;
    this.number = number;
    this.showLevel = function(){
        console.log(this.level);
    }
}

但是妹妹們也是由炮姐克隆而來(lái)的啊，炮姐有的屬性她們也都應(yīng)該有啊，怎么辦，直接在Sister()里新增屬性嗎？太麻煩了而且這就跟炮姐沒(méi)關(guān)系了，炮姐哪天要是在GrilFriend()里多錄入一個(gè)新的屬性，在Sister()也還得繼續(xù)添加。
就沒(méi)有什么更好的方式嗎，答案是肯定的

于是我們就用炮姐這個(gè)實(shí)例對(duì)象作為原型對(duì)象

Sister.prototype = mikoto;

在這里Sister.prototype指的是由構(gòu)造函數(shù)Sister()生成的實(shí)例對(duì)象所對(duì)應(yīng)的原型對(duì)象
說(shuō)白了，上面這行代碼的的作用就是讓所有由Sister()生成的實(shí)例對(duì)象的原型對(duì)象都是mikoto，我們來(lái)試試結(jié)果

var sister = new Sister(3,"0001");
sister.showPower();//BiliBili
sister.showLevel();//3

到此為止一個(gè)擁有3級(jí)BiliBili能力的妹妹就誕生了

而且其整個(gè)的執(zhí)行過(guò)程也與我們對(duì)鏈的理解一樣，是從內(nèi)到外，從這兒到那兒的

GirlFriend.prototype.age = 14;
console.log(sister);//見(jiàn)截圖
console.log(sister.age)//14

從結(jié)果中可以看出，sister對(duì)象內(nèi)部并沒(méi)有age屬性，在sister對(duì)象的原型對(duì)象mikoto中也沒(méi)有age屬性，但是在mikoto的原型對(duì)象中包含age屬性并且有值，所以sister對(duì)象就順著原型鏈一路找到了第一個(gè)age屬性

但其實(shí)sister的因?yàn)槭潜豢寺〕鰜?lái)的所以只有1歲而已

sister.age = 1;
console.log(sister);//見(jiàn)截圖
console.log(sister.age)//1

從運(yùn)行結(jié)果可以看出，sister對(duì)象內(nèi)部有age屬性，這個(gè)是sister原型鏈上第一個(gè)age屬性，所以sister.age的值就取1
為由GirlFriend()實(shí)例化對(duì)象的原型對(duì)象增加屬性age并賦值，看看sister.age

在上文代碼和截圖中出現(xiàn)了兩個(gè)和prototype相關(guān)的詞，prototype和_proto_，這倆貨是干啥的？
其實(shí)上文提到了，構(gòu)造函數(shù)Foo()的prototype屬性指的就是這個(gè)構(gòu)造函數(shù)所對(duì)應(yīng)的原型對(duì)象，其實(shí)就是通過(guò)Foo()創(chuàng)建的對(duì)象的原型對(duì)象，所以prototype是構(gòu)造函數(shù)所具有的一個(gè)屬性
而_proto_屬性是對(duì)應(yīng)對(duì)象所說(shuō)的，見(jiàn)上文注1所說(shuō)，舉個(gè)例子

sister.__proto__.age = 1
console.log(mikoto.age);//1
console.log(kuroko.age);//14
sister.__proto__.__proto__.age = 1
console.log(kuroko.age);//1

正如例子中表現(xiàn)的，對(duì)象可以通過(guò)_proto_屬性獲得自己的原型對(duì)象，以及原型鏈上每一個(gè)對(duì)象

在截圖中的原型對(duì)象中，還存在一個(gè)constructor的屬性，這個(gè)屬性指向的就是這個(gè)原型對(duì)象所對(duì)應(yīng)的構(gòu)造函數(shù)，也就是那個(gè)構(gòu)造出原型對(duì)象為該對(duì)象的函數(shù)，一句話概括就是構(gòu)造函數(shù)和其對(duì)應(yīng)的對(duì)象互相擁有彼此，構(gòu)造函數(shù)將對(duì)象放在prototype屬性中，對(duì)象將構(gòu)造函數(shù)放在constructor屬性中我想這就是愛(ài)情吧

這里再放一張圖，就能更清除解釋他們之間的關(guān)系了

源自知乎問(wèn)題 - js中__proto__和prototype的區(qū)別和關(guān)系？ - doris的回答

繞了這么大一圈，還沒(méi)忘我們?yōu)槭裁匆芯吭桶?，通過(guò)原型的方式創(chuàng)建對(duì)象的屬性和方法，就可以利用同種對(duì)象類型的不同實(shí)例擁有想用的原型對(duì)象這一特性，避免重復(fù)創(chuàng)建，并且在修改原型對(duì)象的某個(gè)屬性后，也可以通過(guò)原型鏈影響到其他所有相關(guān)對(duì)象上。

舉個(gè)例子

GirlFriend.prototype.sayHello = function(){
    console.log("Ohayo!")
}
kuroko.sayHello();//Ohayo!
sister.sayHello();//Ohayo!

并且說(shuō)到底她們執(zhí)行的都是同一個(gè)sayHello()

關(guān)于原型這塊概念相對(duì)復(fù)雜，還設(shè)計(jì)嵌套，相互引用等等深坑，還是得先捋清楚再自己多做聯(lián)系來(lái)理解和熟練運(yùn)用啦
能看到這的估計(jì)都懵逼了