作者：DBCdouble

https://juejin.im/post/6869689622676471816

一、前言

相信很多人在遇到面試中都遇到過(guò)被問(wèn)到過(guò)JavaScript繼承模式的問(wèn)題，都能手寫(xiě)出幾種繼承模式的代碼例子，但為什么面試官卻對(duì)你的回答不是很滿(mǎn)意或者壓根就沒(méi)聽(tīng)懂，個(gè)人覺(jué)得應(yīng)該是缺少自己的一個(gè)答題的思路。

二、答題技巧

• 第一，按照幾種繼承模式的從最次的繼承模式到最佳的繼承模式的順序去講

• 第二，講出當(dāng)前這種繼承模式的利弊，相對(duì)前一種繼承模式解決了什么問(wèn)題，最關(guān)鍵的代碼部分在哪里

以下著重講一下幾種常見(jiàn)的幾種繼承模式

二、原型鏈繼承

代碼示例

function Parent (sex) { this.sex = sex} Parent.prototype.setSex = function () {} function Son (name) { this.name = name} Son.prototype = new Parent()var s1 = new Son('DBCDouble')console.log(s1)

結(jié)果打印

關(guān)鍵：把子類(lèi)的原型指向父類(lèi)的實(shí)例，從而繼承父類(lèi)的私有屬性和原型屬性

優(yōu)點(diǎn)：

• 父類(lèi)新增原型屬性和方法，子類(lèi)實(shí)例都能訪問(wèn)到

• 簡(jiǎn)單、易用

缺點(diǎn)：

• 無(wú)法實(shí)現(xiàn)多繼承（一個(gè)子類(lèi)繼承成多個(gè)父類(lèi)）

• 創(chuàng)建子類(lèi)實(shí)例的時(shí)候，無(wú)法向父類(lèi)構(gòu)造函數(shù)傳參

• 有子類(lèi)實(shí)例共享父類(lèi)引用屬性的問(wèn)題（因?yàn)樽宇?lèi)的原型指向的是父類(lèi)的一個(gè)實(shí)例，假如父類(lèi)的私有屬性有一個(gè)是數(shù)組(引用類(lèi)型)，那么任一子類(lèi)都可以操作這個(gè)數(shù)組，從而導(dǎo)致其他子類(lèi)使用的這個(gè)數(shù)組也會(huì)發(fā)生變化）

四、借用父類(lèi)構(gòu)造函數(shù)繼承

代碼示例

function Parent (sex) { this.sex = sex} Parent.prototype.setSex = function () {} function Son (name, age, sex) { Parent.call(this, sex) this.name = name this.age = age}var s1 = new Son('DBCdouble', 25, '男')console.log(s1)

結(jié)果打印

關(guān)鍵：在子類(lèi)構(gòu)造函數(shù)中使用call或者apply調(diào)用父類(lèi)構(gòu)造函數(shù)實(shí)現(xiàn)父類(lèi)私有屬性繼承（函數(shù)復(fù)用）

優(yōu)點(diǎn)：

• 創(chuàng)建子類(lèi)實(shí)例時(shí)，可以向父類(lèi)傳遞參數(shù)

• 可以實(shí)現(xiàn)多繼承（在子類(lèi)構(gòu)造函數(shù)調(diào)用多個(gè)父類(lèi)構(gòu)造函數(shù)）

• 解決了原型鏈繼承中子類(lèi)實(shí)例共享父類(lèi)引用屬性的問(wèn)題（即使父類(lèi)構(gòu)造函數(shù)中有引用類(lèi)型，在創(chuàng)建子類(lèi)實(shí)例時(shí)，都會(huì)重新調(diào)用父類(lèi)構(gòu)造函數(shù)重新創(chuàng)建一份這個(gè)引用類(lèi)型數(shù)據(jù)，重新申請(qǐng)引用類(lèi)型的空間）

缺點(diǎn)：

• 每次創(chuàng)建子類(lèi)實(shí)例時(shí)，都要調(diào)用一次父類(lèi)構(gòu)造函數(shù)，影響性能

• 只繼承父類(lèi)的實(shí)例屬性(私有屬性)，沒(méi)有繼承父類(lèi)的原型屬性

五、組合式繼承(原型鏈繼承 + 借用構(gòu)造函數(shù)繼承)

代碼示例

function Parent (sex) { this.sex = sex} Parent.prototype.setSex = function () {} function Son (name, age, sex) { Parent.call(this, sex) this.name = name this.age = age}Son.prototype = Object.create(Parent.prototype)Son.prototype.constructor = Sonvar s1 = new Son('DBCdouble', 25, '男')console.log(s1)

打印結(jié)果

關(guān)鍵：通過(guò)調(diào)用父類(lèi)構(gòu)造函數(shù)，繼承父類(lèi)的屬性并保留傳參的優(yōu)點(diǎn)，并通過(guò)Object.create(Parent.prototype)來(lái)創(chuàng)建繼承了父類(lèi)原型屬性的對(duì)象，并把這個(gè)對(duì)象賦給子類(lèi)的原型，這樣的話(huà)，既能保證父類(lèi)構(gòu)造函數(shù)不用執(zhí)行兩次，又能讓子類(lèi)能繼承到父類(lèi)的原型方法

優(yōu)點(diǎn)：

• 創(chuàng)建子類(lèi)實(shí)例時(shí)，可以向父類(lèi)傳遞參數(shù)

• 可以實(shí)現(xiàn)多繼承（在子類(lèi)構(gòu)造函數(shù)調(diào)用多個(gè)父類(lèi)構(gòu)造函數(shù)）

• 解決了原型鏈繼承中子類(lèi)實(shí)例共享父類(lèi)引用屬性的問(wèn)題（即使父類(lèi)構(gòu)造函數(shù)中有引用類(lèi)型，在創(chuàng)建子類(lèi)實(shí)例時(shí)，都會(huì)重新調(diào)用父類(lèi)構(gòu)造函數(shù)重新創(chuàng)建一份這個(gè)引用類(lèi)型數(shù)據(jù)，重新申請(qǐng)引用類(lèi)型的空間）

• 父類(lèi)構(gòu)造函數(shù)只用執(zhí)行一次

六、ES6的class繼承

ES6中引入了class關(guān)鍵字，class可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，還可以通過(guò)static關(guān)鍵字定義類(lèi)的靜態(tài)方法，這比 ES5 的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。

注意：ES5 的繼承，實(shí)質(zhì)是先創(chuàng)造子類(lèi)的實(shí)例對(duì)象this，然后再將父類(lèi)的方法添加到this上面（Parent.apply(this)）。ES6 的繼承機(jī)制完全不同，實(shí)質(zhì)是先將父類(lèi)實(shí)例對(duì)象的屬性和方法加到this上面（所以必須先調(diào)用super方法），然后再用子類(lèi)的構(gòu)造函數(shù)修改this。

代碼示例

class A { constructor (sex) { this.sex = sex } showSex () { console.log('這里是父類(lèi)的方法') }} class B extends A { constructor (name, age, sex) { super(sex); this.name = name; this.age = age; }  showSex () { console.log('這里是子類(lèi)的方法') }} const b = new B('DBCDOUBLE', 25, '男')console.log(b);

打印結(jié)果

關(guān)鍵：使用extends關(guān)鍵字繼承父類(lèi)的原型屬性，調(diào)用super來(lái)繼承父類(lèi)的實(shí)例屬性，且保留向父類(lèi)構(gòu)造函數(shù)傳參的優(yōu)點(diǎn)

優(yōu)點(diǎn)：簡(jiǎn)單易用，不用自己來(lái)修改原型鏈來(lái)完成繼承

我們通過(guò)將代碼從ES6編譯到ES5來(lái)看看到底，class繼承的代碼最終會(huì)被編譯成什么樣，如下：

從上圖分析得到：

• 上述代碼示例中的super指的就是父類(lèi)構(gòu)造函數(shù)

• 子類(lèi)繼承父類(lèi)的實(shí)例屬性最終還是通過(guò)call或者apply來(lái)實(shí)現(xiàn)繼承的

• 通過(guò)extends方法的調(diào)用來(lái)修改子類(lèi)和父類(lèi)的原型鏈關(guān)系

再看經(jīng)過(guò)編譯后的extends方法，如下

1、注意Object.setPrototypeOf()方法設(shè)置一個(gè)指定的對(duì)象的原型 ( 即, 內(nèi)部[[Prototype]]屬性）到另一個(gè)對(duì)象或null。
2、(.prototype = b.prototype, new ())表達(dá)式的執(zhí)行執(zhí)行順序是先執(zhí)行前者，再返回后者

從上圖可知，extends做了以下幾件事：

• 定義了一個(gè)function __() {}函數(shù)，并把該函數(shù)的constructor指向了子類(lèi)

• 緊接著，把function __() {} 函數(shù)的原型指向了父類(lèi)的原型

• 最后再把function () {} 函數(shù)的實(shí)例賦給了子類(lèi)函數(shù)，就這樣子類(lèi)的實(shí)例就能沿著proto.proto獲取到父類(lèi)的原型屬性了，這種繼承模式俗稱(chēng)圣杯模式