出處：https://blog.csdn.net/cc18868876837/article/details/81211729

文章目錄

1. 前言

2. _ _ proto _ _ 屬性

3. prototype屬性

4. constructor屬性

5. 總結(jié)

提示：不要排斥，靜下心來买置，認(rèn)真讀完角寸，你就搞懂了！(可以先看一下最后的總結(jié)部分再回過頭來完整看完)

1. 前言

??作為一名前端工程師弱贼，必須搞懂JS中的prototype、__proto__與constructor屬性磷蛹，相信很多初學(xué)者對這些屬性存在許多困惑哮洽，容易把它們混淆，本文旨在幫助大家理清它們之間的關(guān)系并徹底搞懂它們弦聂。這里說明一點，__proto__屬性的兩邊是各由兩個下劃線構(gòu)成（這里為了方便大家看清氛什，在兩下劃線之間加入了一個空格：_ _proto_ _莺葫，讀作“dunder proto”，“double underscore proto”的縮寫）枪眉，實際上捺檬，該屬性在ES標(biāo)準(zhǔn)定義中的名字應(yīng)該是[[Prototype]]，具體實現(xiàn)是由瀏覽器代理自己實現(xiàn)贸铜，谷歌瀏覽器的實現(xiàn)就是將[[Prototype]]命名為__proto__堡纬，大家清楚這個標(biāo)準(zhǔn)定義與具體實現(xiàn)的區(qū)別即可（名字有所差異，功能是一樣的）蒿秦，可以通過該方式檢測引擎是否支持這個屬性：Object.getPrototypeOf({__proto__: null}) === null烤镐。本文基于谷歌瀏覽器（版本 72.0.3626.121）的實驗結(jié)果所得。

?? 現(xiàn)在正式開始棍鳖！ 讓我們從如下一個簡單的例子展開討論炮叶，并配以相關(guān)的圖幫助理解：

function Foo() {...};

let f1 = new Foo();

以上代碼表示創(chuàng)建一個構(gòu)造函數(shù)Foo()碗旅，并用new關(guān)鍵字實例化該構(gòu)造函數(shù)得到一個實例化對象f1。這里稍微補充一下new操作符將函數(shù)作為構(gòu)造器進(jìn)行調(diào)用時的過程：函數(shù)被調(diào)用镜悉，然后新創(chuàng)建一個對象祟辟，并且成了函數(shù)的上下文（也就是此時函數(shù)內(nèi)部的this是指向該新創(chuàng)建的對象，這意味著我們可以在構(gòu)造器函數(shù)內(nèi)部通過this參數(shù)初始化值）侣肄，最后返回該新對象的引用旧困，詳細(xì)請看：詳解JavaScript中的new操作符。雖然是簡簡單單的兩行代碼稼锅，然而它們背后的關(guān)系卻是錯綜復(fù)雜的吼具，如下圖所示：

看到這圖別怕，讓我們一步步剖析缰贝，徹底搞懂它們馍悟！

??圖的說明：右下角為圖例，紅色箭頭表示__proto__屬性指向剩晴、綠色箭頭表示prototype屬性的指向锣咒、棕色實線箭頭表示本身具有的constructor屬性的指向，棕色虛線箭頭表示繼承而來的constructor屬性的指向赞弥；藍(lán)色方塊表示對象毅整，淺綠色方塊表示函數(shù)（這里為了更好看清，F(xiàn)oo()僅代表是函數(shù)绽左，并不是指執(zhí)行函數(shù)Foo后得到的結(jié)果悼嫉，圖中的其他函數(shù)同理）。圖的中間部分即為它們之間的聯(lián)系拼窥，圖的最左邊即為例子代碼戏蔑。

2. _ _ proto _ _ 屬性

??首先，我們需要牢記兩點：①__proto__和constructor屬性是對象所獨有的鲁纠；② prototype屬性是函數(shù)所獨有的总棵。但是由于JS中函數(shù)也是一種對象，所以函數(shù)也擁有__proto__和constructor屬性改含，這點是致使我們產(chǎn)生困惑的很大原因之一情龄。上圖有點復(fù)雜，我們把它按照屬性分別拆開捍壤，然后進(jìn)行分析：

??第一骤视，這里我們僅留下 __proto__ 屬性，它是對象所獨有的鹃觉，可以看到__proto__屬性都是由一個對象指向一個對象专酗，即指向它們的原型對象（也可以理解為父對象），那么這個屬性的作用是什么呢盗扇？它的作用就是當(dāng)訪問一個對象的屬性時笼裳，如果該對象內(nèi)部不存在這個屬性唯卖，那么就會去它的__proto__屬性所指向的那個對象（可以理解為父對象）里找，如果父對象也不存在這個屬性躬柬，則繼續(xù)往父對象的__proto__屬性所指向的那個對象（可以理解為爺爺對象）里找拜轨，如果還沒找到，則繼續(xù)往上找…直到原型鏈頂端null（可以理解為原始人允青。橄碾。。）颠锉，再往上找就相當(dāng)于在null上取值法牲，會報錯（可以理解為，再往上就已經(jīng)不是“人”的范疇了琼掠，找不到了拒垃，到此結(jié)束，null為原型鏈的終點）瓷蛙，由以上這種通過__proto__屬性來連接對象直到null的一條鏈即為我們所謂的原型鏈悼瓮。

??其實我們平時調(diào)用的字符串方法、數(shù)組方法艰猬、對象方法横堡、函數(shù)方法等都是靠__proto__繼承而來的。

3. prototype屬性

??第二冠桃，接下來我們看 prototype 屬性：

??prototype屬性命贴，別忘了一點，就是我們前面提到要牢記的兩點中的第二點食听，它是函數(shù)所獨有的胸蛛，它是從一個函數(shù)指向一個對象。它的含義是函數(shù)的原型對象樱报，也就是這個函數(shù)（其實所有函數(shù)都可以作為構(gòu)造函數(shù)）所創(chuàng)建的實例的原型對象胚泌，由此可知：f1.__proto__ === Foo.prototype，它們兩個完全一樣肃弟。那prototype屬性的作用又是什么呢？它的作用就是包含可以由特定類型的所有實例共享的屬性和方法零蓉，也就是讓該函數(shù)所實例化的對象們都可以找到公用的屬性和方法笤受。任何函數(shù)在創(chuàng)建的時候，其實會默認(rèn)同時創(chuàng)建該函數(shù)的prototype對象敌蜂。

4. constructor屬性

??最后箩兽，我們來看一下 constructor 屬性：

??constructor屬性也是對象才擁有的，它是從一個對象指向一個函數(shù)章喉，含義就是指向該對象的構(gòu)造函數(shù)汗贫，每個對象都有構(gòu)造函數(shù)（本身擁有或繼承而來身坐，繼承而來的要結(jié)合__proto__屬性查看會更清楚點，如下圖所示）落包，從上圖中可以看出Function這個對象比較特殊部蛇，它的構(gòu)造函數(shù)就是它自己（因為Function可以看成是一個函數(shù)，也可以是一個對象）咐蝇，所有函數(shù)和對象最終都是由Function構(gòu)造函數(shù)得來涯鲁，所以constructor屬性的終點就是Function這個函數(shù)。

??感謝網(wǎng)友的指出有序，這里解釋一下上段中“每個對象都有構(gòu)造函數(shù)”這句話抹腿。這里的意思是每個對象都可以找到其對應(yīng)的constructor，因為創(chuàng)建對象的前提是需要有constructor旭寿，而這個constructor可能是對象自己本身顯式定義的或者通過__proto__在原型鏈中找到的警绩。而單從constructor這個屬性來講，只有prototype對象才有盅称。每個函數(shù)在創(chuàng)建的時候肩祥，JS會同時創(chuàng)建一個該函數(shù)對應(yīng)的prototype對象，而函數(shù)創(chuàng)建的對象.__proto__ === 該函數(shù).prototype微渠，該函數(shù).prototype.constructor===該函數(shù)本身搭幻，故通過函數(shù)創(chuàng)建的對象即使自己沒有constructor屬性，它也能通過__proto__找到對應(yīng)的constructor逞盆，所以任何對象最終都可以找到其構(gòu)造函數(shù)（null如果當(dāng)成對象的話檀蹋，將null除外）。如下：

5. 總結(jié)

?總結(jié)一下：

我們需要牢記兩點：①__proto__和constructor屬性是對象所獨有的云芦；② prototype屬性是函數(shù)所獨有的俯逾，因為函數(shù)也是一種對象，所以函數(shù)也擁有__proto__和constructor屬性舅逸。

__proto__屬性的作用就是當(dāng)訪問一個對象的屬性時桌肴，如果該對象內(nèi)部不存在這個屬性，那么就會去它的__proto__屬性所指向的那個對象（父對象）里找琉历，一直找坠七，直到__proto__屬性的終點null，再往上找就相當(dāng)于在null上取值旗笔，會報錯彪置。通過__proto__屬性將對象連接起來的這條鏈路即我們所謂的原型鏈。

prototype屬性的作用就是讓該函數(shù)所實例化的對象們都可以找到公用的屬性和方法蝇恶，即f1.__proto__ === Foo.prototype拳魁。

constructor屬性的含義就是指向該對象的構(gòu)造函數(shù)，所有函數(shù)（此時看成對象了）最終的構(gòu)造函數(shù)都指向Function撮弧。

??本文就此結(jié)束了潘懊，希望對那些對JS中的prototype姚糊、__proto__與constructor屬性有困惑的同學(xué)有所幫助。

最后授舟，感謝這兩篇博文救恨，本文中的部分內(nèi)容參考自這兩篇博文：

https://www.cnblogs.com/xiaohuochai/p/5721552.html

https://www.cnblogs.com/Narcotic/p/6899088.html

————————————————

版權(quán)聲明：本文為CSDN博主「碼飛_CC」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議岂却，轉(zhuǎn)載請附上原文出處鏈接及本聲明忿薇。

原文鏈接：https://blog.csdn.net/cc18868876837/article/details/81211729