訂閱
糾錯(cuò)
加入自媒體

JavaScript如何實(shí)現(xiàn)繼承解析

背景簡(jiǎn)介

JavaScript 在編程語言界是個(gè)特殊種類,它和其他編程語言很不一樣,JavaScript 可以在運(yùn)行的時(shí)候動(dòng)態(tài)地改變某個(gè)變量的類型。

比如你永遠(yuǎn)也沒法想到像isTimeout這樣一個(gè)變量可以存在多少種類型,除了布爾值true和false,它還可能是undefined、1和0、一個(gè)時(shí)間戳,甚至一個(gè)對(duì)象。

如果代碼跑異常,打開瀏覽器,開始斷點(diǎn)調(diào)試,發(fā)現(xiàn)InfoList這個(gè)變量第一次被賦值的時(shí)候是個(gè)數(shù)組:

[{name: 'test1', value: '11'}, {name: 'test2', value: '22'}]

過了一會(huì)竟然變成了一個(gè)對(duì)象:

{test1:'11', test2: '22'}

除了變量可以在運(yùn)行時(shí)被賦值為任何類型以外,JavaScript 中也能實(shí)現(xiàn)繼承,但它不像 Java、C++、C# 這些編程語言一樣基于類來實(shí)現(xiàn)繼承,而是基于原型進(jìn)行繼承。

這是因?yàn)?JavaScript 中有個(gè)特殊的存在:對(duì)象。每個(gè)對(duì)象還都擁有一個(gè)原型對(duì)象,并可以從中繼承方法和屬性。

提到對(duì)象和原型,有如下問題:

JavaScript 的函數(shù)怎么也是個(gè)對(duì)象?

proto和prototype到底是啥關(guān)系?

JavaScript 中對(duì)象是怎么實(shí)現(xiàn)繼承的?

JavaScript 是怎么訪問對(duì)象的方法和屬性的?

原型對(duì)象和對(duì)象的關(guān)系

在 JavaScript 中,對(duì)象由一組或多組的屬性和值組成:

image.png

在 JavaScript 中,對(duì)象的用途很是廣泛,因?yàn)樗闹导瓤梢允窃碱愋停╪umber、string、boolean、null、undefined、bigint和symbol),還可以是對(duì)象和函數(shù)。

不管是對(duì)象,還是函數(shù)和數(shù)組,它們都是Object的實(shí)例,也就是說在 JavaScript 中,除了原始類型以外,其余都是對(duì)象。

這也就解答了問題1:JavaScript 的函數(shù)怎么也是個(gè)對(duì)象?

在 JavaScript 中,函數(shù)也是一種特殊的對(duì)象,它同樣擁有屬性和值。所有的函數(shù)會(huì)有一個(gè)特別的屬性prototype,該屬性的值是一個(gè)對(duì)象,這個(gè)對(duì)象便是我們常說的“原型對(duì)象”。

我們可以在控制臺(tái)打印一下這個(gè)屬性:

image.png

打印結(jié)果顯示為:

可以看到,該原型對(duì)象有兩個(gè)屬性:constructor和proto。

到這里,我們仿佛看到疑惑 “2:proto和prototype到底是啥關(guān)系?”的答案要出現(xiàn)了。在 JavaScript 中,proto屬性指向?qū)ο蟮脑蛯?duì)象,對(duì)于函數(shù)來說,它的原型對(duì)象便是prototype。函數(shù)的原型對(duì)象prototype有以下特點(diǎn):

默認(rèn)情況下,所有函數(shù)的原型對(duì)象(prototype)都擁有constructor屬性,該屬性指向與之關(guān)聯(lián)的構(gòu)造函數(shù),在這里構(gòu)造函數(shù)便是Person函數(shù);

Person函數(shù)的原型對(duì)象(prototype)同樣擁有自己的原型對(duì)象,用proto屬性表示。前面說過,函數(shù)是Object的實(shí)例,因此Person.prototype的原型對(duì)象為Object.prototype。

我們可以用這樣一張圖來描述prototype、proto和constructor三個(gè)屬性的關(guān)系:

從這個(gè)圖中,我們可以找到這樣的關(guān)系:

在 JavaScript 中,proto屬性指向?qū)ο蟮脑蛯?duì)象;

對(duì)于函數(shù)來說,每個(gè)函數(shù)都有一個(gè)prototype屬性,該屬性為該函數(shù)的原型對(duì)象;

使用 prototype 和 proto 實(shí)現(xiàn)繼承

對(duì)象之所以使用廣泛,是因?yàn)閷?duì)象的屬性值可以為任意類型。因此,屬性的值同樣可以為另外一個(gè)對(duì)象,這意味著 JavaScript 可以這么做:通過將對(duì)象 A 的proto屬性賦值為對(duì)象 B,即:

A.__proto__ = B

此時(shí)使用A.proto便可以訪問 B 的屬性和方法。

這樣,JavaScript 可以在兩個(gè)對(duì)象之間創(chuàng)建一個(gè)關(guān)聯(lián),使得一個(gè)對(duì)象可以訪問另一個(gè)對(duì)象的屬性和方法,從而實(shí)現(xiàn)了繼承;

使用prototype和proto實(shí)現(xiàn)繼承

以Person為例,當(dāng)我們使用new Person()創(chuàng)建對(duì)象時(shí),JavaScript 就會(huì)創(chuàng)建構(gòu)造函數(shù)Person的實(shí)例,比如這里我們創(chuàng)建了一個(gè)叫“zhangsan”的Person:

var zhangsan = new Person("zhangsan");

上述這段代碼在運(yùn)行時(shí),JavaScript 引擎通過將Person的原型對(duì)象prototype賦值給實(shí)例對(duì)象zhangsan的proto屬性,實(shí)現(xiàn)了zhangsan對(duì)Person的繼承,即執(zhí)行了以下代碼:

//JavaScript 引擎執(zhí)行了以下代碼var zhangsan = {};zhangsan.__proto__ = Person.prototype;Person.call(zhangsan, "zhangsan");

我們來打印一下zhangsan實(shí)例:

console.log(zhangsan)

結(jié)果如下圖所示:

可以看到,zhangsan作為Person的實(shí)例對(duì)象,它的proto指向了Person的原型對(duì)象,即Person.prototype。

這時(shí),我們?cè)傺a(bǔ)充下上圖中的關(guān)系:

從這幅圖中,我們可以清晰地看到構(gòu)造函數(shù)和constructor屬性、原型對(duì)象(prototype)和proto、實(shí)例對(duì)象之間的關(guān)系,這是很多容易混淆。根據(jù)這張圖,我們可以得到以下的關(guān)系:

每個(gè)函數(shù)的原型對(duì)象(Person.prototype)都擁有constructor屬性,指向該原型對(duì)象的構(gòu)造函數(shù)(Person);

使用構(gòu)造函數(shù)(new Person())可以創(chuàng)建對(duì)象,創(chuàng)建的對(duì)象稱為實(shí)例對(duì)象(lily);

實(shí)例對(duì)象通過將proto屬性指向構(gòu)造函數(shù)的原型對(duì)象(Person.prototype),實(shí)現(xiàn)了該原型對(duì)象的繼承。

那么現(xiàn)在,關(guān)于proto和prototype的關(guān)系,我們可以得到這樣的答案:

每個(gè)對(duì)象都有proto屬性來標(biāo)識(shí)自己所繼承的原型對(duì)象,但只有函數(shù)才有prototype屬性;

對(duì)于函數(shù)來說,每個(gè)函數(shù)都有一個(gè)prototype屬性,該屬性為該函數(shù)的原型對(duì)象;

通過將實(shí)例對(duì)象的proto屬性賦值為其構(gòu)造函數(shù)的原型對(duì)象prototype,JavaScript 可以使用構(gòu)造函數(shù)創(chuàng)建對(duì)象的方式,來實(shí)現(xiàn)繼承。

所以一個(gè)對(duì)象可通過proto訪問原型對(duì)象上的屬性和方法,而該原型同樣也可通過proto訪問它的原型對(duì)象,這樣我們就在實(shí)例和原型之間構(gòu)造了一條原型鏈。紅色線條所示:

通過原型鏈訪問對(duì)象的方法和屬性

當(dāng) JavaScript 試圖訪問一個(gè)對(duì)象的屬性時(shí),會(huì)基于原型鏈進(jìn)行查找。查找的過程是這樣的:

首先會(huì)優(yōu)先在該對(duì)象上搜尋。如果找不到,還會(huì)依次層層向上搜索該對(duì)象的原型對(duì)象、該對(duì)象的原型對(duì)象的原型對(duì)象等(套娃告警);

JavaScript 中的所有對(duì)象都來自O(shè)bject,Object.prototype.proto === null。null沒有原型,并作為這個(gè)原型鏈中的最后一個(gè)環(huán)節(jié);

JavaScript 會(huì)遍歷訪問對(duì)象的整個(gè)原型鏈,如果最終依然找不到,此時(shí)會(huì)認(rèn)為該對(duì)象的屬性值為undefined。

我們可以通過一個(gè)具體的例子,來表示基于原型鏈的對(duì)象屬性的訪問過程,在該例子中我們構(gòu)建了一條對(duì)象的原型鏈,并進(jìn)行屬性值的訪問:

var o = {a: 1, b: 2}; // 讓我們假設(shè)我們有一個(gè)對(duì)象 o, 其有自己的屬性 a 和 b:o.__proto__ = {b: 3, c: 4}; // o 的原型 o.__proto__有屬性 b 和 c:

當(dāng)我們?cè)讷@取屬性值的時(shí)候,就會(huì)觸發(fā)原型鏈的查找:

console.log(o.a(chǎn)); // o.a(chǎn) => 1console.log(o.b); // o.b => 2console.log(o.c); // o.c => o.__proto__.c => 4console.log(o.d); // o.c => o.__proto__.d => o.__proto__.__proto__ == null => undefined

綜上,整個(gè)原型鏈如下:

{a:1, b:2} ---> {b:3, c:4} ---> null, // 這就是原型鏈的末尾,即 null

可以看到,當(dāng)我們對(duì)對(duì)象進(jìn)行屬性值的獲取時(shí),會(huì)觸發(fā)該對(duì)象的原型鏈查找過程。

既然 JavaScript 中會(huì)通過遍歷原型鏈來訪問對(duì)象的屬性,那么我們可以通過原型鏈的方式進(jìn)行繼承。

也就是說,可以通過原型鏈去訪問原型對(duì)象上的屬性和方法,我們不需要在創(chuàng)建對(duì)象的時(shí)候給該對(duì)象重新賦值/添加方法。比如,我們調(diào)用lily.toString()時(shí),JavaScript 引擎會(huì)進(jìn)行以下操作:

先檢查lily對(duì)象是否具有可用的toString()方法;

如果沒有,則``檢查lily的原型對(duì)象(Person.prototype)是否具有可用的toString()方法;

如果也沒有,則檢查Person()構(gòu)造函數(shù)的prototype屬性所指向的對(duì)象的原型對(duì)象(即Object.prototype)是否具有可用的toString()方法,于是該方法被調(diào)用。

由于通過原型鏈進(jìn)行屬性的查找,需要層層遍歷各個(gè)原型對(duì)象,此時(shí)可能會(huì)帶來性能問題:

當(dāng)試圖訪問不存在的屬性時(shí),會(huì)遍歷整個(gè)原型鏈;

在原型鏈上查找屬性比較耗時(shí),對(duì)性能有副作用,這在性能要求苛刻的情況下很重要。

因此,我們?cè)谠O(shè)計(jì)對(duì)象的時(shí)候,需要注意代碼中原型鏈的長(zhǎng)度。當(dāng)原型鏈過長(zhǎng)時(shí),可以選擇進(jìn)行分解,來避免可能帶來的性能問題。

其他方式實(shí)現(xiàn)繼承

除了通過原型鏈的方式實(shí)現(xiàn) JavaScript 繼承,JavaScript 中實(shí)現(xiàn)繼承的方式還包括經(jīng)典繼承(盜用構(gòu)造函數(shù))、組合繼承、原型式繼承、寄生式繼承,等等。

原型鏈繼承方式中引用類型的屬性被所有實(shí)例共享,無法做到實(shí)例私有;

經(jīng)典繼承方式可以實(shí)現(xiàn)實(shí)例屬性私有,但要求類型只能通過構(gòu)造函數(shù)來定義;

組合繼承融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn),它的實(shí)現(xiàn)如下:

image.png

組合繼承模式通過將共享屬性定義在父類原型上、將私有屬性通過構(gòu)造函數(shù)賦值的方式,實(shí)現(xiàn)了按需共享對(duì)象和方法,是 JavaScript 中最常用的繼承模式。

雖然在繼承的實(shí)現(xiàn)方式上有很多種,但實(shí)際上都離不開原型對(duì)象和原型鏈的內(nèi)容,因此掌握proto和prototype、對(duì)象的繼承等這些知識(shí),是我們實(shí)現(xiàn)各種繼承方式的前提條件。

總結(jié)

關(guān)于 JavaScript 的原型和繼承,常常會(huì)在我們面試題中出現(xiàn)。隨著 ES6/ES7 等新語法糖的出現(xiàn),可能更傾向于使用class/extends等語法來編寫代碼,原型繼承等概念逐漸變淡。

其次JavaScript 的設(shè)計(jì)在本質(zhì)上依然沒有變化,依然是基于原型來實(shí)現(xiàn)繼承的。如果不了解這些內(nèi)容,可能在我們遇到一些超出自己認(rèn)知范圍的內(nèi)容時(shí),很容易束手無策。

聲明: 本文由入駐維科號(hào)的作者撰寫,觀點(diǎn)僅代表作者本人,不代表OFweek立場(chǎng)。如有侵權(quán)或其他問題,請(qǐng)聯(lián)系舉報(bào)。

發(fā)表評(píng)論

0條評(píng)論,0人參與

請(qǐng)輸入評(píng)論內(nèi)容...

請(qǐng)輸入評(píng)論/評(píng)論長(zhǎng)度6~500個(gè)字

您提交的評(píng)論過于頻繁,請(qǐng)輸入驗(yàn)證碼繼續(xù)

  • 看不清,點(diǎn)擊換一張  刷新

暫無評(píng)論

暫無評(píng)論

人工智能 獵頭職位 更多
掃碼關(guān)注公眾號(hào)
OFweek人工智能網(wǎng)
獲取更多精彩內(nèi)容
文章糾錯(cuò)
x
*文字標(biāo)題:
*糾錯(cuò)內(nèi)容:
聯(lián)系郵箱:
*驗(yàn) 證 碼:

粵公網(wǎng)安備 44030502002758號(hào)