資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)單回顧一下構(gòu)造函數(shù)原型和實(shí)例對(duì)象之間的關(guān)系每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象。找到生成構(gòu)造函數(shù)的原型對(duì)象的構(gòu)造函數(shù)，搜索其原型對(duì)象，找到了。
JS面向?qū)ο蟮某绦蛟O(shè)計(jì)之繼承的實(shí)現(xiàn) - 原型鏈
前言：最近在細(xì)讀Javascript高級(jí)程序設(shè)計(jì)，對(duì)于我而言，中文版，書(shū)中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯(cuò)誤，會(huì)非常感謝您的指出。文中絕大部分內(nèi)容引用自《JavaScript高級(jí)程序設(shè)計(jì)第三版》。
繼承是OO（Object Oriented， 面向?qū)ο螅┱Z(yǔ)言中的一個(gè)最為人津津樂(lè)道的概念。
許多OO語(yǔ)言都支持兩種繼承方式：接口繼承和實(shí)現(xiàn)繼承。
接口繼承只繼承簽名，而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。
如前所述， 由于函數(shù)沒(méi)有簽名，在ECMAScript中無(wú)法實(shí)現(xiàn)接口繼承。
前面暫時(shí)看不懂沒(méi)關(guān)系，可以學(xué)學(xué)一些Java基礎(chǔ)知識(shí)，這樣回過(guò)來(lái)看，就明白說(shuō)啥了?。?/p>
記住這句就行，ECMAScript只支持實(shí)現(xiàn)繼承，而且其實(shí)現(xiàn)繼承主要是依靠原型鏈來(lái)實(shí)現(xiàn)的。
原型鏈ECMAScript中描述了原型鏈的概念，并將原型鏈作為實(shí)現(xiàn)繼承的主要方法。
其基本思想是利用原型，讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。
簡(jiǎn)單回顧一下構(gòu)造函數(shù)、原型和實(shí)例對(duì)象之間的關(guān)系：
每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象。
原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針。
實(shí)例對(duì)象都包含一個(gè)指向原型對(duì)象的內(nèi)部指針。
//偽代碼
//構(gòu)造函數(shù)
function Person(){
}
//構(gòu)造函數(shù)的原型對(duì)象中constructor指向構(gòu)造函數(shù)自身
Person.prototype.constructor => 指向 function Person(){}
var person1 = new Person();
//實(shí)例對(duì)象指向原型對(duì)象的內(nèi)部指針。
person1.__proto__ => 指向 Person.prototype
這部分，文字描述有些晦澀！看不懂的話，先看代碼例子。
假如，我們讓原型對(duì)象等于另一個(gè)類型的實(shí)例對(duì)象， 結(jié)果會(huì)怎么樣呢？
顯然，此時(shí)原型對(duì)象將包含一個(gè)指向另一個(gè)原型的指針。
相應(yīng)地， 另一個(gè)原型中也包含著一個(gè)指向另一個(gè)構(gòu)造函數(shù)原型的指針。
假如，另一個(gè)原型又是另一個(gè)類型的實(shí)例對(duì)象，還是包含一個(gè)指針指向另外一個(gè)構(gòu)造函數(shù)的原型，所以上述關(guān)系依然成立。
如此層層遞進(jìn)，就構(gòu)成了實(shí)例與原型的鏈條。
這就是所謂原型鏈的基本概念。
你可以想象成 “不斷認(rèn)祖歸宗”的過(guò)程，認(rèn)祖歸宗的路徑連接起來(lái)，就形成了一個(gè)“血緣鏈”。
實(shí)現(xiàn)原型鏈的基本模式
//實(shí)現(xiàn)原型鏈的示例代碼
//SuperType 父類型
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperProperty = function() {
console.log(this.property);
return this.property;
}
//SubType 子類型
function SubType() {
this.subproperty = false;
}
//子類型 繼承 父類型
SubType.prototype = new SuperType();
//實(shí)際上子類型的原型是這樣的。
/*SubType.prototype = {
property: true,
__proto__: {
constructor : SuperType,
getSuperProperty：function() {
console.log(this.property);
return this.property;
}
}
}
*/
SubType.prototype.getSubProperty = function(){
console.log(this.subproperty);
return this.subproperty;
}
//那么現(xiàn)在子類型的原型對(duì)象是這樣的
/*SubType.prototype = {
property: true,
getSubProperty: function() {
console.log(this.subproperty);
return this.subproperty;
},
__proto__: {
constructor : SuperType,
getSuperProperty：function() {
console.log(this.property);
return this.property;
}
}
}
*/
var subInstanceObject = new SubType();
console.log(subInstanceObject.getSuperProperty()); // true
以上代碼定義了兩個(gè)類型（構(gòu)造函數(shù)）：
SuperType（父類型）和 SubType（子類型）。
每個(gè)類型分別有一個(gè)屬性和方法。
它們主要的區(qū)別是SubType繼承了SuperType（子類繼承父類），而繼承是通過(guò)創(chuàng)建SuperType的實(shí)例對(duì)象， 然后將實(shí)例對(duì)象賦予SubType.prototype（子類的原型）實(shí)現(xiàn)的。
實(shí)現(xiàn)的本質(zhì)是重寫原型，改寫為另外一個(gè)類型的實(shí)例對(duì)象，
生成另外一個(gè)類型的實(shí)例對(duì)象的過(guò)程中，實(shí)例對(duì)象中的所有屬性和方法，賦予給重寫的原型，
重點(diǎn)，這個(gè)實(shí)例對(duì)象的內(nèi)部有個(gè)屬性__proto__指向，構(gòu)造這個(gè)實(shí)例對(duì)象的構(gòu)造函數(shù)原型，
從而實(shí)現(xiàn)繼承，
屬性__proto__，確實(shí)很像一條鏈子！
實(shí)現(xiàn)原型鏈，本質(zhì)上擴(kuò)展了原型搜索機(jī)制。
當(dāng)讀取或者訪問(wèn)一個(gè)實(shí)例屬性時(shí)，首先會(huì)在實(shí)例中搜索該屬性，如果沒(méi)有找到該屬性，則會(huì)沿著去搜索實(shí)例對(duì)象內(nèi)部的__proto__指向的原型。
通過(guò)原型鏈實(shí)現(xiàn)繼承，搜索過(guò)程，就像沿著一條鏈子不斷向上搜尋。
就上面的示例代碼來(lái)說(shuō)，subInstanceObject.getSuperProperty()會(huì)經(jīng)歷三次查找！
查找過(guò)程
搜索實(shí)例對(duì)象自身， 沒(méi)找到該方法，沿著__proto__找。
找到（構(gòu)造）實(shí)例對(duì)象的構(gòu)造函數(shù)的原型對(duì)象，還是沒(méi)找到該方法，繼續(xù)沿著原型對(duì)象的__proto__的指向?qū)ふ摇?/p>
找到生成構(gòu)造函數(shù)的原型對(duì)象的構(gòu)造函數(shù)，搜索其原型對(duì)象，找到了。
在找不到屬性或方法的情況下，搜索過(guò)程總是要一環(huán)一環(huán)地前行到原型鏈末端才會(huì)停下來(lái)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98387.html
摘要：第一種方式是使用操作符，只要檢測(cè)的實(shí)例對(duì)象中的原型鏈包含出現(xiàn)過(guò)的構(gòu)造函數(shù)，結(jié)果就會(huì)返回。而這也正是組合使用原型模式和構(gòu)造函數(shù)模式的原因。在構(gòu)造函數(shù)模式中定義屬性，在原型模式中定義共享的方法。 前言：最近在細(xì)讀Javascript高級(jí)程序設(shè)計(jì)，對(duì)于我而言，中文版，書(shū)中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯(cuò)誤，會(huì)非常感謝您的指出。文中絕大部分內(nèi)容引用自《Ja...
摘要：是完全的面向?qū)ο笳Z(yǔ)言，它們通過(guò)類的形式組織函數(shù)和變量，使之不能脫離對(duì)象存在。而在基于原型的面向?qū)ο蠓绞街?，?duì)象則是依靠構(gòu)造器利用原型構(gòu)造出來(lái)的。 JavaScript 函數(shù)式腳本語(yǔ)言特性以及其看似隨意的編寫風(fēng)格，導(dǎo)致長(zhǎng)期以來(lái)人們對(duì)這一門語(yǔ)言的誤解，即認(rèn)為 JavaScript 不是一門面向?qū)ο蟮恼Z(yǔ)言，或者只是部分具備一些面向?qū)ο蟮奶卣?。本文將回歸面向?qū)ο蟊疽?，從?duì)語(yǔ)言感悟的角度闡述為什...
摘要：面向?qū)ο笾玩湆?duì)象和對(duì)象之間的關(guān)系注意這個(gè)系列文章要經(jīng)常站在之父的視角去思考。思考問(wèn)題我們都知道都屬于那么既然他們都是對(duì)象一定有某些相同之處吧對(duì)象和對(duì)象之間有什么關(guān)聯(lián)呢如果說(shuō)你沒(méi)有思考過(guò)這個(gè)問(wèn)題那么可以換一個(gè)更具體的問(wèn)題。 JS面向?qū)ο笾?【原型鏈】(對(duì)象和對(duì)象之間的關(guān)系) 注意這個(gè)系列文章,要經(jīng)常站在JS之父的視角去思考。 牢記我們的需求,我要在JS沒(méi)有class的情況下,那么...
摘要：實(shí)現(xiàn)思路使用原型鏈實(shí)現(xiàn)對(duì)原型方法和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。繼承屬性繼承方法以上代碼，構(gòu)造函數(shù)定義了兩個(gè)屬性和。 JS面向?qū)ο蟮某绦蛟O(shè)計(jì)之繼承的實(shí)現(xiàn)-組合繼承 前言：最近在細(xì)讀Javascript高級(jí)程序設(shè)計(jì)，對(duì)于我而言，中文版，書(shū)中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯(cuò)誤，會(huì)非常感謝您的指出。文中絕大部分內(nèi)容引用自《Java...
摘要：很多情況下，通常一個(gè)人類，即創(chuàng)建了一個(gè)具體的對(duì)象。對(duì)象就是數(shù)據(jù)，對(duì)象本身不包含方法。類是相似對(duì)象的描述，稱為類的定義，是該類對(duì)象的藍(lán)圖或原型。在中，對(duì)象通過(guò)對(duì)類的實(shí)體化形成的對(duì)象。一類的對(duì)象抽取出來(lái)。注意中，對(duì)象一定是通過(guò)類的實(shí)例化來(lái)的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...
閱讀 2651·2021-11-22 15:24
閱讀 1383·2021-11-17 09:38
閱讀 2757·2021-10-09 09:57
閱讀 1209·2019-08-30 15:44
閱讀 2449·2019-08-30 14:00
閱讀 3550·2019-08-30 11:26
閱讀 2942·2019-08-29 16:28
閱讀 757·2019-08-29 13:56
