資訊專欄INFORMATION COLUMN
摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個繼承層級，而實線表示屬性引用。原型鏈?zhǔn)菍崿F(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。
之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學(xué)經(jīng)常都會遇到。這里給大家講講，方便大家記憶。
JavaScript的特點(diǎn)
JavaScript是一門直譯式腳本語言，是一種動態(tài)類型、基于原型的語言。 JavaScript的靈活性不亞于C++，你可以使用JavaScript嘗試不同的程序設(shè)計范型。
比如類jQuery風(fēng)格的函數(shù)式編程、基于過程的指令式編程、以及基于原型的面向?qū)ο缶幊獭?br>不同于Java、C#等面向?qū)ο笳Z言，JavaScript采用基于原型的繼承方式。
為啥會有原型和原型鏈？
1994年，網(wǎng)景公司（Netscape）發(fā)布了Navigator瀏覽器0.9版，但是剛開始的Js沒有繼承機(jī)制，更別提像同時期興盛的C++和Java這樣擁有面向?qū)ο蟮母拍睢Ｔ趯嶋H的開發(fā)過程中，工程師們發(fā)現(xiàn)沒有繼承機(jī)制很難解決一些問題，必須有一種機(jī)制能將所有的對象關(guān)聯(lián)起來。
Brendan Eich鑒于以上情況，但不想把Js設(shè)計得過為復(fù)雜，于是引入了new關(guān)鍵詞和constructor構(gòu)造函數(shù)來簡化對象的設(shè)計，引入了prototype函數(shù)對象來包含所有實例對象的構(gòu)造函數(shù)的屬性和方法，引入了proto和原型鏈的概念解決繼承的問題。
原型模式
每個函數(shù)都有一個prototype(原型)屬性
這個屬性都有一個指針，指向一個對象
這個對象包含由特定類型所有實例共享的屬性和方法
使用原型的好處是可以讓所有對象實例共享它包含的方法和屬性
通過in操作符和hasOwnProperty來判斷給定屬性是來自于原型還是實例
in- true 代表屬性在對象中存在 來自實例或者來自原型
hasOwnProperty- true代表屬性來自于實例 是實例屬性
原型鏈
ECMAScript中只支持實現(xiàn)繼承，而且是通過原型鏈的方式來實現(xiàn)的。所以原型鏈?zhǔn)荍avaScript實現(xiàn)繼承的一種重要方式。
用戶定義類型的原型鏈
我們一般如何來檢查JavaScript的變量數(shù)據(jù)類型？一般我們都是通過instanceof關(guān)鍵字，可以基于原型鏈來檢測變量的類型。
我們可以先構(gòu)造一個原型鏈，再用instanceof來檢測類型：
????由上面講的instanceof的結(jié)果，可以判斷這些類型的繼承層級：
??事實上instanceof是通過原型鏈來檢測類型的，例如L instanceof R： 如果R.prototype出現(xiàn)在了L的原型鏈上則返回true，否則返回false。
用JavaScript來描述instanceof的實現(xiàn)邏輯是這樣的：
??JavaScript原型鏈
先給大家看一個JavaScript的原型鏈結(jié)構(gòu)圖。
理解原型鏈的小技巧： 將__proto__箭頭視作泛化（子類到父類）關(guān)系！
那么圖中所有的虛線將構(gòu)成一個繼承層級，而實線表示屬性引用。
圖中給出了Object.prototype.__proto__ == null，但它還沒有標(biāo)準(zhǔn)化，在Chrome、Safari和Node.js下它是不同的東西。
但可以看到JavaScript中所有對象的共同隱式原型為Object.prototype，它的上一級隱式原型是什么已經(jīng)不重要了， 因為它不會影響所有內(nèi)置對象以及用戶定義類型的原型鏈結(jié)構(gòu)。
上圖其實已經(jīng)解釋了不同內(nèi)置對象instanceof的行為，我們來看Function和Object的特殊之處：
Object是由Function創(chuàng)建的：因為Object.__proto__ === Funciton.prototype；
同理，F(xiàn)unction.prototype是由Object創(chuàng)建的；
Funciton是由Function自己創(chuàng)建的！
Object.prototype是憑空出來的！
現(xiàn)在我們可以解釋特殊對象的instance行為了：
??另外可以看到當(dāng)你聲明一個函數(shù)（比如Animal）時，Animal.prototype會自動被賦值為一個繼承自O(shè)bject的對象， 而且該對象的constructor等于Animal。即：
??
值得注意的是Animal如果被Cat繼承，Cat實例（比如cat）的constructor仍然是Animal。
??
總結(jié)
1.每個函數(shù)對象都有一個 prototype 屬性，這個屬性就是函數(shù)的原型對象。
2.原型鏈?zhǔn)荍avaScript實現(xiàn)繼承的重要方式，原型鏈的形成是真正是靠__proto__ 而非prototype。
喜歡文章的可以關(guān)注小編~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54859.html
摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個繼承層級，而實線表示屬性引用。原型鏈?zhǔn)菍崿F(xiàn)繼承的重要方式，原型鏈的形成是真正是靠而非。 之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學(xué)經(jīng)常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點(diǎn)JavaScript是一門直譯式腳本...
摘要：探索是如何判斷的表達(dá)式如果函數(shù)的顯式原型對象在對象的隱式原型鏈上，返回，否則返回是通過自己產(chǎn)生的實例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測試題測試題報錯對照下圖理解 原型與原型鏈深入理解（圖解） 原型（prototype） 函數(shù)的 prototype 屬性（圖） 每個函數(shù)都有一個prototype屬性，它默認(rèn)指向一個Object空對象（即稱為：原型對象） 原型對象中有...
摘要：參考內(nèi)容關(guān)于本文本文轉(zhuǎn)自大叔的深入理解系列深入理解系列文章，包括了原創(chuàng)，翻譯，轉(zhuǎn)載，整理等各類型文章，原文是大叔的一個非常不錯的專題，現(xiàn)將其重新整理發(fā)布。 前言 JavaScript 不包含傳統(tǒng)的類繼承模型，而是使用 prototypal 原型模型。 雖然這經(jīng)常被當(dāng)作是 JavaScript 的缺點(diǎn)被提及，其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。實現(xiàn)傳統(tǒng)的類繼承模型是很簡單，但是...
摘要：原文地址詳解的類博主博客地址的個人博客從當(dāng)初的一個彈窗語言，一步步發(fā)展成為現(xiàn)在前后端通吃的龐然大物。那么，的類又該怎么定義呢在面向?qū)ο缶幊讨?，類是對象的模板，定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現(xiàn)已棄用。。 前言 生活有度，人生添壽。 原文地址：詳解javascript的類 博主博客地址：Damonare的個人博客 ??Javascript從當(dāng)初的一個彈窗語言，一...
閱讀 1096·2021-11-22 14:56
閱讀 1537·2019-08-30 15:55
閱讀 3379·2019-08-30 15:45
閱讀 1668·2019-08-30 13:03
閱讀 2881·2019-08-29 18:47
閱讀 3346·2019-08-29 11:09
閱讀 2652·2019-08-26 18:36
閱讀 2629·2019-08-26 13:55
