JS中的prototype、__proto__與constructor是怎么用的

本篇文章給大家分享的是有關(guān)JS中的prototype、__proto__與constructor是怎么用的，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1. 前言
??作為一名前端工程師，必須搞懂JS中的prototype、__proto__與constructor屬性，相信很多初學(xué)者對這些屬性存在許多困惑，容易把它們混淆，本文旨在幫助大家理清它們之間的關(guān)系并徹底搞懂它們。這里說明一點(diǎn)，__proto__屬性的兩邊是各由兩個(gè)下劃線構(gòu)成（這里為了方便大家看清，在兩下劃線之間加入了一個(gè)空格：_ _proto_ _），實(shí)際上，該屬性在ES標(biāo)準(zhǔn)定義中的名字應(yīng)該是[[Prototype]]，具體實(shí)現(xiàn)是由瀏覽器代理自己實(shí)現(xiàn)，谷歌瀏覽器的實(shí)現(xiàn)就是將[[Prototype]]命名為__proto__，大家清楚這個(gè)標(biāo)準(zhǔn)定義與具體實(shí)現(xiàn)的區(qū)別即可（名字有所差異，功能是一樣的）。本文基于谷歌瀏覽器（版本 72.0.3626.121）的實(shí)驗(yàn)結(jié)果所得。
?? 現(xiàn)在正式開始！ 讓我們從如下一個(gè)簡單的例子展開討論，并配以相關(guān)的圖幫助理解：
 

function Foo() {...};
let f1 = new Foo();

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

看到這圖別怕，讓我們一步步剖析，徹底搞懂它們！
??圖的說明：右下角為圖例，紅色箭頭表示__proto__屬性指向、綠色箭頭表示prototype屬性的指向、棕色實(shí)線箭頭表示本身具有的constructor屬性的指向，棕色虛線箭頭表示繼承而來的constructor屬性的指向；藍(lán)色方塊表示對象，淺綠色方塊表示函數(shù)（這里為了更好看清，F(xiàn)oo()僅代表是函數(shù)，并不是指執(zhí)行函數(shù)Foo后得到的結(jié)果，圖中的其他函數(shù)同理）。圖的中間部分即為它們之間的聯(lián)系，圖的最左邊即為例子代碼。

2. _ _ proto _ _ 屬性

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

3. prototype屬性

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

以上就是JS中的prototype、__proto__與constructor是怎么用的，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。