背景簡(jiǎn)介

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

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

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

［｛name： ＇test1＇， value： ＇11＇｝， ｛name： ＇test2＇， value： ＇22＇｝］

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

｛test1：＇11＇， test2： ＇22＇｝

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

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

提到對(duì)象和原型，有如下問(wèn)題：

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

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

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

JavaScript 是怎么訪問(wèn)對(duì)象的方法和屬性的？

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

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

在 JavaScript 中，對(duì)象的用途很是廣泛，因?yàn)樗�的值既可以是原始�?lèi)型（number、string、boolean、null、undefined、bigint和symbol），還可以是對(duì)象和函數(shù)。

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

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

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

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

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

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

到這里，我們仿佛看到疑惑 “2：proto和prototype到底是啥關(guān)系？”的答案要出現(xiàn)了。在 JavaScript 中，proto屬性指向?qū)ο蟮脑�型�?duì)象，對(duì)于函數(shù)來(lái)說(shuō)，它的原型對(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屬性表示。前面說(shuō)過(guò)，函數(shù)是Object的實(shí)例，因此Person．prototype的原型對(duì)象為Object．prototype。

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

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

在 JavaScript 中，proto屬性指向?qū)ο蟮脑�型�?duì)象；

對(duì)于函數(shù)來(lái)說(shuō)，每個(gè)函數(shù)都有一個(gè)prototype屬性，該屬性為該函數(shù)的原型對(duì)象；

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

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

A．＿＿proto＿＿ ＝ B

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

這樣，JavaScript 可以在兩個(gè)對(duì)象之間創(chuàng)建一個(gè)關(guān)聯(lián)，使得一個(gè)對(duì)象可以訪問(wèn)另一個(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 引擎通過(guò)將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＂）；

我們來(lái)打印一下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ì)象稱(chēng)為實(shí)例對(duì)象（lily）；

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

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

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

對(duì)于函數(shù)來(lái)說(shuō)，每個(gè)函數(shù)都有一個(gè)prototype屬性，該屬性為該函數(shù)的原型對(duì)象；

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

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

通過(guò)原型鏈訪問(wèn)對(duì)象的方法和屬性

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

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

JavaScript 中的所有對(duì)象都來(lái)自O(shè)bject，Object．prototype．proto ＝＝＝ null。null沒(méi)有原型，并作為這個(gè)原型鏈中的最后一個(gè)環(huán)節(jié)；

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

我們可以通過(guò)一個(gè)具體的例子，來(lái)表示基于原型鏈的對(duì)象屬性的訪問(wèn)過(guò)程，在該例子中我們構(gòu)建了一條對(duì)象的原型鏈，并進(jìn)行屬性值的訪問(wè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ì)象的原型鏈查找過(guò)程。

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

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

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

如果沒(méi)有，則｀｀檢查lily的原型對(duì)象（Person．prototype）是否具有可用的toString（）方法；

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

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

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

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

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

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

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

原型鏈繼承方式中引用類(lèi)型的屬性被所有實(shí)例共享，無(wú)法做到實(shí)例私有；

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

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

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

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

總結(jié)

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

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