為什么你老是講不清楚js的繼承模式

作者：佚名 2020-09-10 16:10:17

開發前端

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

一、前言

二、答題技巧

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

第二，講出當前這種繼承模式的利弊，相對前一種繼承模式解決了什么問題，最關鍵的代碼部分在哪里

以下著重講一下幾種常見的幾種繼承模式

二、原型鏈繼承

代碼示例

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)

結果打印

關鍵：把子類的原型指向父類的實例，從而繼承父類的私有屬性和原型屬性

優點：

父類新增原型屬性和方法，子類實例都能訪問到
簡單、易用

缺點：

無法實現多繼承（一個子類繼承成多個父類）
創建子類實例的時候，無法向父類構造函數傳參
有子類實例共享父類引用屬性的問題（因為子類的原型指向的是父類的一個實例，假如父類的私有屬性有一個是數組(引用類型)，那么任一子類都可以操作這個數組，從而導致其他子類使用的這個數組也會發生變化）

四、借用父類構造函數繼承

代碼示例

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)

結果打印

關鍵：在子類構造函數中使用call或者apply調用父類構造函數實現父類私有屬性繼承（函數復用）

優點：

創建子類實例時，可以向父類傳遞參數
可以實現多繼承（在子類構造函數調用多個父類構造函數）
解決了原型鏈繼承中子類實例共享父類引用屬性的問題（即使父類構造函數中有引用類型，在創建子類實例時，都會重新調用父類構造函數重新創建一份這個引用類型數據，重新申請引用類型的空間）

缺點：

每次創建子類實例時，都要調用一次父類構造函數，影響性能
只繼承父類的實例屬性(私有屬性)，沒有繼承父類的原型屬性

五、組合式繼承(原型鏈繼承 + 借用構造函數繼承)

代碼示例

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)  
SonSon.prototype.constructor = Son  
var s1 = new Son('DBCdouble', 25, '男')  
console.log(s1)

打印結果

關鍵：通過調用父類構造函數，繼承父類的屬性并保留傳參的優點，并通過Object.create(Parent.prototype)來創建繼承了父類原型屬性的對象，并把這個對象賦給子類的原型，這樣的話，既能保證父類構造函數不用執行兩次，又能讓子類能繼承到父類的原型方法

優點：

創建子類實例時，可以向父類傳遞參數
可以實現多繼承（在子類構造函數調用多個父類構造函數）
解決了原型鏈繼承中子類實例共享父類引用屬性的問題（即使父類構造函數中有引用類型，在創建子類實例時，都會重新調用父類構造函數重新創建一份這個引用類型數據，重新申請引用類型的空間）
父類構造函數只用執行一次

六、ES6的class繼承

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

注意：ES5 的繼承，實質是先創造子類的實例對象this，然后再將父類的方法添加到this上面（Parent.apply(this)）。ES6 的繼承機制完全不同，實質是先將父類實例對象的屬性和方法加到this上面（所以必須先調用super方法），然后再用子類的構造函數修改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);