點擊上方 "前端技術(shù)精選"?關(guān)注，星標或者置頂

17點30分準時推送，第一時間送達

作者：DBCdouble | 編輯：前端妹

來自：juejin.im/post/6869689622676471816

前端技術(shù)精選(ID：FrontEndTech)第 91 次推文 圖源：百度上一篇：微信再迎反轉(zhuǎn)！美國司法部再次要求封禁微信，美微聯(lián)會：將會抗爭到底

正文

一、前言

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

二、答題技巧

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

• 第二，講出當前這種繼承模式的利弊，相對前一種繼承模式解決了什么問題，最關(guā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)鍵：把子類的原型指向父類的實例，從而繼承父類的私有屬性和原型屬性

優(yōu)點：

• 父類新增原型屬性和方法，子類實例都能訪問到

• 簡單、易用

缺點：

• 無法實現(xiàn)多繼承(一個子類繼承成多個父類)

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

• 有子類實例共享父類引用屬性的問題(因為子類的原型指向的是父類的一個實例，假如父類的私有屬性有一個是數(shù)組(引用類型)，那么任一子類都可以操作這個數(shù)組，從而導(dǎo)致其他子類使用的這個數(shù)組也會發(fā)生變化)

四、借用父類構(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)鍵：在子類構(gòu)造函數(shù)中使用call或者apply調(diào)用父類構(gòu)造函數(shù)實現(xiàn)父類私有屬性繼承(函數(shù)復(fù)用)

優(yōu)點：

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

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

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

缺點：

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

• 只繼承父類的實例屬性(私有屬性)，沒有繼承父類的原型屬性

五、組合式繼承(原型鏈繼承 + 借用構(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)鍵：通過調(diào)用父類構(gòu)造函數(shù)，繼承父類的屬性并保留傳參的優(yōu)點，并通過Object.create(Parent.prototype)來創(chuàng)建繼承了父類原型屬性的對象，并把這個對象賦給子類的原型，這樣的話，既能保證父類構(gòu)造函數(shù)不用執(zhí)行兩次，又能讓子類能繼承到父類的原型方法

優(yōu)點：

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

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

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

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

六、ES6的class繼承

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

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

代碼示例

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

打印結(jié)果

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

優(yōu)點：簡單易用，不用自己來修改原型鏈來完成繼承

我們通過將代碼從ES6編譯到ES5來看看到底，class繼承的代碼最終會被編譯成什么樣，如下：

從上圖分析得到：

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

• 子類繼承父類的實例屬性最終還是通過call或者apply來實現(xiàn)繼承的

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

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

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

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

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

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

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

前端妹拍了拍你說：

記得戳小花花哦~

歷史回顧：如何將Canvas繪制過程轉(zhuǎn)為視頻打破國外壟斷！華為被曝自研編程語言“倉頡”，南大教授馮新宇領(lǐng)銜JS 原生面經(jīng)從初級到高級(近1.5萬字)Node.js開發(fā)人員都應(yīng)該知道的12個有用的包Flutter 完成全平臺制霸：實現(xiàn) Windows 應(yīng)用支持15條你可能不知道的JS高效技巧

喜歡本文的朋友們，歡迎長按下圖關(guān)注訂閱號前端技術(shù)精選

收看更多精彩內(nèi)容

你在看嗎？一起成長

總結(jié)

以上是生活随笔為你收集整理的oncreate为什么一定要调用父类的oncreat_为什么你老是讲不清楚JS的继承模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。