理解原型的幾個(gè)關(guān)鍵點(diǎn)：

1、所有的引用類型（數(shù)組、函數(shù)、對(duì)象）可以自由擴(kuò)展屬性（除null以外）;

2、所有的引用類型（對(duì)象）都有一個(gè)’_ _ proto_ _'屬性(也叫隱式原型，它是一個(gè)普通的對(duì)象)，指向原型對(duì)象；

3、所有的函數(shù)都有一個(gè)’prototype’屬性(這也叫顯式原型，它也是一個(gè)普通的對(duì)象，該對(duì)象就是函數(shù)的原型對(duì)象，對(duì)象中包含所有實(shí)例對(duì)象可以共享的屬性和方法)。’prototype’屬性是函數(shù)獨(dú)有的，任何函數(shù)在創(chuàng)建的時(shí)候，其實(shí)會(huì)默認(rèn)同時(shí)創(chuàng)建該函數(shù)的prototype對(duì)象;

4、所有引用類型，它的’_ _ proto_ _'屬性指向它的構(gòu)造函數(shù)的’prototype’屬性（所以? 函數(shù)._ _ proto_ _ ===function.prototype）;

5、當(dāng)試圖得到一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象本身不存在這個(gè)屬性，那么就會(huì)去它的’_ _ proto_ _'屬性(也就是它的構(gòu)造函數(shù)的’prototype’屬性)中去尋找。

6、constructor屬性也是對(duì)象才擁有的，指向該對(duì)象的構(gòu)造函數(shù)。函數(shù)創(chuàng)建的對(duì)象.__proto__ === 該函數(shù).prototype，該函數(shù).prototype.constructor===該函數(shù)本身，故通過(guò)函數(shù)創(chuàng)建的對(duì)象即使自己沒(méi)有constructor屬性，它也能通過(guò)__proto__找到對(duì)應(yīng)的constructor，所以任何對(duì)象最終都可以找到其構(gòu)造函數(shù)（null如果當(dāng)成對(duì)象的話，將null除外）

?

?

原型：

先來(lái)看一個(gè)原型的例子。

//這是一個(gè)構(gòu)造函數(shù)function Foo(name,age){this.name=name;this.age=age;}/*根據(jù)要點(diǎn)3，所有的函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性是一個(gè)對(duì)象再根據(jù)要點(diǎn)1，所有的對(duì)象可以自由擴(kuò)展屬性于是就有了以下寫法*/Foo.prototype={// prototype對(duì)象里面又有其他的屬性showName:function(){console.log("I'm "+this.name);//this是什么要看執(zhí)行的時(shí)候誰(shuí)調(diào)用了這個(gè)函數(shù)},showAge:function(){console.log("And I'm "+this.age);//this是什么要看執(zhí)行的時(shí)候誰(shuí)調(diào)用了這個(gè)函數(shù)}}var fn=new Foo('小明',19)/*當(dāng)試圖得到一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象本身不存在這個(gè)屬性，那么就會(huì)去它構(gòu)造函數(shù)的'prototype'屬性中去找*/fn.showName(); //I'm 小明fn.showAge(); //And I'm 19

這就是原型，很好理解。那為什么要使用原型呢？

試想如果我們要通過(guò)Foo()來(lái)創(chuàng)建很多很多個(gè)對(duì)象，如果我們是這樣子寫的話：

function Foo(name,age){this.name=name;this.age=age;this.showName=function(){console.log("I'm "+this.name);}this.showAge=function(){console.log("And I'm "+this.age);}}

那么我們創(chuàng)建出來(lái)的每一個(gè)對(duì)象，里面都有showName和showAge方法，這樣就會(huì)占用很多的資源。
而通過(guò)原型來(lái)實(shí)現(xiàn)的話，只需要在構(gòu)造函數(shù)里面給屬性賦值，而把方法寫在Foo.prototype屬性(這個(gè)屬性是唯一的)里面。這樣每個(gè)對(duì)象都可以使用prototype屬性里面的showName、showAge方法，并且節(jié)省了不少的資源。
?

---

?

原型鏈

理解了原型，那么原型鏈就更好理解了。

#####下面這段話可以幫助理解原型鏈
根據(jù)要點(diǎn)5，當(dāng)試圖得到一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象本身不存在這個(gè)屬性，那么就會(huì)去它構(gòu)造函數(shù)的’prototype’屬性中去尋找。那又因?yàn)椤痯rototype’屬性是一個(gè)對(duì)象，所以它也有一個(gè)’_ _ proto_ _'屬性。

// 構(gòu)造函數(shù)function Foo(name,age){this.name=name;this.age=age;}Object.prototype.toString=function(){//this是什么要看執(zhí)行的時(shí)候誰(shuí)調(diào)用了這個(gè)函數(shù)。console.log("I'm "+this.name+" And I'm "+this.age);}var fn=new Foo('小明',19);fn.toString(); //I'm 小明 And I'm 19console.log(fn.toString===Foo.prototype.__proto__.toString); //trueconsole.log(fn.__proto__ ===Foo.prototype)//trueconsole.log(Foo.prototype.__proto__===Object.prototype)//trueconsole.log(Object.prototype.__proto__===null)//true

?

是不是覺(jué)得有點(diǎn)奇怪？我們來(lái)分析一下。

?

首先，fn的構(gòu)造函數(shù)是Foo()。所以：
fn._ _ proto _ _=== Foo.prototype
又因?yàn)镕oo.prototype是一個(gè)普通的對(duì)象，它的構(gòu)造函數(shù)是Object，所以：
Foo.prototype._ _ proto _ _=== Object.prototype
通過(guò)上面的代碼，我們知道這個(gè)toString()方法是在Object.prototype里面的，當(dāng)調(diào)用這個(gè)對(duì)象的本身并不存在的方法時(shí)，它會(huì)一層一層地往上去找，一直到null為止。

所以當(dāng)fn調(diào)用toString()時(shí)，JS發(fā)現(xiàn)fn中沒(méi)有這個(gè)方法，于是它就去Foo.prototype中去找，發(fā)現(xiàn)還是沒(méi)有這個(gè)方法，然后就去Object.prototype中去找，找到了，就調(diào)用Object.prototype中的toString()方法。

__proto__屬性的作用就是當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性時(shí)，如果該對(duì)象內(nèi)部不存在這個(gè)屬性，那么就會(huì)去它的__proto__屬性所指向的那個(gè)對(duì)象（父對(duì)象）里找，一直找，直到__proto__屬性的終點(diǎn)null，再往上找就相當(dāng)于在null上取值，會(huì)報(bào)錯(cuò)。通過(guò)__proto__屬性將對(duì)象連接起來(lái)的這條鏈路即我們所謂的原型鏈。
?

另外，在使用原型的時(shí)候，一般推薦將需要擴(kuò)展的方法寫在構(gòu)造函數(shù)的prototype屬性中，避免寫在_ _ proto _ _屬性里面。
?

總結(jié)：

• 當(dāng)所有的實(shí)例對(duì)象都需要共享屬性和方法時(shí)，通過(guò)原型來(lái)實(shí)現(xiàn)就是將屬性方法放在實(shí)例對(duì)象的構(gòu)造函數(shù)的prototype屬性中（該屬性值就是原型對(duì)象，包含共享屬性和方法）；
• ??訪問(wèn)一個(gè)對(duì)象的屬性時(shí)，先在基本屬性中查找，如果沒(méi)有，再沿著__proto__這條鏈向上找，這就是原型鏈。
• 根據(jù)原型鏈可以確定繼承關(guān)系。由于所有的對(duì)象的原型鏈都會(huì)找到Object.prototype，因此所有的對(duì)象都會(huì)有Object.prototype的方法。這就是所謂的“繼承”。
• 對(duì)象引用類型通過(guò)instanceof來(lái)判斷。

?

?

---

版權(quán)聲明：文章內(nèi)容主要綜合來(lái)自鏈接處，

https://blog.csdn.net/qq_36996271/article/details/82527256

https://blog.csdn.net/cc18868876837/article/details/81211729

總結(jié)

以上是生活随笔為你收集整理的JS中的prototype、__proto__与constructor，原型和原型链的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。