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