徹底搞懂js里的proto和prototype到底有什么區別？

honhon 發布于2019-08-26 12:12 / 1329人閱讀

摘要：即對象具有屬性，可稱為隱式原型，一個對象的隱式原型指向構造該對象的構造函數的原型，這也保證了實例能夠訪問在構造函數原型中定義的屬性和方法。重點隱式原型指向構造該對象的構造函數的原型。

1.在JS里，萬物皆對象。方法（Function）是對象，方法的原型(Function.prototype)是對象。因此，它們都會具有對象共有的特點。即：對象具有屬性proto，可稱為隱式原型，一個對象的隱式原型指向構造該對象的構造函數的原型，這也保證了實例能夠訪問在構造函數原型中定義的屬性和方法。
2.方法(Function)方法這個特殊的對象，除了和其他對象一樣有上述proto屬性之外，還有自己特有的屬性——原型屬性（prototype），這個屬性是一個指針，指向一個對象，這個對象的用途就是包含所有實例共享的屬性和方法（我們把這個對象叫做原型對象）。原型對象也有一個屬性，叫做constructor，這個屬性包含了一個指針，指回原構造函數。
1.1
首先聲明一個對象和一個函數，console.log一下對象和函數的proto
var A = function () {};
var B ={};

console.log(A.__proto__)
console.log(B.__proto__)
控制臺輸出結果如下圖所示：

剛才不是說函數是對象嗎？它們的proto為啥不一樣？往下看，別著急。
var A = function () {};
var B ={};
console.log(A.__proto__.__proto__)
console.log(B.__proto__)
console.log結果如下：

是不是一樣了，，確實有點懵逼啊。。重點 隱式原型指向構造該對象的構造函數的原型。因為function是特殊的對象，A.proto就指向了構造該函數的一個函數（隨意起個名字 C）,C的proto就指向了和B對象一樣的proto。。我自己都懵逼了。
1.2一個對象和一個函數，console.log一下對象和函數的prototype
var A = function () {};
var B ={};
console.log(A.prototype)
console.log(B.prototype)
console.log結果如下：

對象并不具有prototype屬性，只有函數才有prototype屬性。這就證明聲明2的說法是正確的。
總結：
js里所有的對象都有proto屬性(對象，函數)，指向構造該對象的構造函數的原型。
只有函數function才具有prototype屬性。這個屬性是一個指針，指向一個對象，這個對象的用途就是包含所有實例共享的屬性和方法（我們把這個對象叫做原型對象）。原型對象也有一個屬性，叫做constructor，這個屬性包含了一個指針，指回原構造函數。

GPU云服務器云服務器 __JS 服務器_云區別 js public_ js_存儲插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108208.html

淺析JavaScript中原型及constructor、__proto__、prototype的關系

摘要：搞清了構造函數和原型的區別后，就可以繼續了。指向構造函數的原型對象，存在于實例與構造函數的原型對象之間。要注意的是當我們使用下面這種將整個重寫的情況時，會切斷構造函數和原型之間的聯系，也就是說不再指向了，而是指向。前言先說一說為什么要搞清楚JavaScript的原型，因為這就是JS的根。JavaScript雖然不是一門傳統的面向對象語言，但它有自己的類和繼承機制，最重要的就是它采用...

wenzi 2019-08-26 13:54 評論0 收藏0
如何繼承Date對象？由一道題徹底弄懂JS繼承。

摘要：前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。倘若用的是中文搜索。所以最終的實例對象仍然能進行正常的原型鏈回溯，回溯到原本的所有原型方法這樣通過一個巧妙的欺騙技巧，就實現了完美的繼承。前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。 20180201更新：修改用詞描述，如組合寄生式改成寄生組合式，修改多處筆誤（感謝@Yao Ding的...

sunnyxd 2019-08-22 13:50 評論0 收藏0
一張圖讓自己搞懂(mēng)原型&原型鏈

摘要：要搞清這三種關系指向之間的關系拗口，其實也就是要搞懂，構造函數由構造函數操作創造出的實例對象和構造函數的原型對象之間的關系。寫在前面這篇博客來源于，有天mentor突然傳給我了這張祖傳的圖片，并且發誓一定要給我講清楚，然鵝在他的一番激情講解之后，他自己也被繞懵了...于是后來我決定整理一下似乎還有點清晰的思路，記錄一下我對這張圖的理解。作為一個小白，對于js中這些比較復雜的概念的理...

CntChen 2019-08-22 18:15 評論0 收藏0
搞懂 Javascript中this 指向及繼承原理

摘要：共享原型鏈現在我們還有另一個對象如圖那么和其實是同一東西，也就是。改進通過第一節可以知道，我們可以通過原型鏈來解決重復創建的問題我們先創建一個士兵原型，然后讓士兵的指向士兵原型。所以這個是原型鏈繼承的缺點，原因是和指向同一個地址即父類的。在理解繼承之前，需要知道 js 的三個東西：什么是 JS 原型鏈 this 的值到底是什么 JS 的new 到底是干什么的想閱讀更多優質文章...

why_rookie 2019-08-23 12:10 評論0 收藏0
關于javascript的原型和原型鏈，看我就夠了（二）

摘要：原文鏈接關于的原型和原型鏈，看我就夠了一參考鏈接闖關記之原型及原型鏈之原型與原型鏈一篇文章帶你理解原型和原型鏈徹底理解原型鏈一的默認指向圖解和的三角關系原型和原型鏈三張圖搞懂的原型對象與原型鏈溫故創建對象的三種方式通過對象直接量通過new創建對象通過Object.create() js中對象分為兩種函數對象普通對象仔細觀察如下代碼 function Foo(na...

eccozhou 2019-08-23 12:44 評論0 收藏0