JS有哪些方式可以實(shí)現(xiàn)繼承?【專欄04】

繼承的含義：

繼承是面向?qū)ο缶幊讨械囊粋€重要概念，通過繼承可以使子類的實(shí)例擁有在父類中定義的屬性和方法。

1、原型鏈繼承

function UserBase(){
}
function User(){
}
User.prototype = new UserBase();

將父類的實(shí)例作為子類的原型。

• （1）不能向構(gòu)造函數(shù)傳參，無法實(shí)現(xiàn)多繼承
• （2）來自原型對象的引用屬性是所有實(shí)例共享的

2、構(gòu)造繼承

實(shí)際上使用父類的構(gòu)造函數(shù)來增強(qiáng)子類，等于是把父類的構(gòu)造函數(shù)復(fù)制給子類。

function UserBase(){
}
function User(userName) {
    UserBase.call(this);
    this.userName = userName;
}
let user = new User("鬼鬼")
user.userName;

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

• （1）可以向構(gòu)造函數(shù)傳參數(shù)
• （2）可以實(shí)現(xiàn)多繼承，多call幾個

缺點(diǎn)：

• （1）無法實(shí)現(xiàn)函數(shù)復(fù)用
• （2）只能繼承父類的屬性和方法，不能繼承父類的原型

3、實(shí)例繼承

為父類實(shí)例添加新屬性，作為子類實(shí)例返回。

function UserBase(){
}
function User(userName) {
  let userBase = new UserBase();
  userBase.userName = userName;
  return userBase;
}
let user = new User("鬼鬼")
user.userName;

• 缺點(diǎn)：無法實(shí)現(xiàn)多繼承

4、拷貝繼承

function UserBase(userName){
}
UserBase.prototype.showInfo = function(){
 console.log(this.userName)
}
function User(userName) {
 let userBase = new UserBase();
 for (let attr in userBase) {
   User.prototype[attr] = userBase[attr];
 }
 this.userName = userName;
}

let user = new User("鬼鬼")
user.showInfo();

• 優(yōu)點(diǎn)：支持多繼承
• 缺點(diǎn)：占用內(nèi)存高，因?yàn)橐胒or in循環(huán)來拷貝父類屬性／方法

不可枚舉方法拷貝不了

5、組合繼承

通過調(diào)用父類構(gòu)造函數(shù)，繼承了父類的屬性，并保留了傳參的優(yōu)點(diǎn)。

然后再將父類實(shí)例作為子類原型，實(shí)現(xiàn)了函數(shù)復(fù)用。

function UserBase(userName){
 this.userName = userName
}
UserBase.prototype.showInfo = function(){
 console.log(this.userName)
}
function User (userName){
    //call方式 
 UserBase.call(this,userName)
     //apply方式 
    UserBase.apply(this,[userName])
}
User.prototype = new UserBase()
let user = new User("鬼鬼")
user.showInfo(); 

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

• （1）繼承父類的屬性和方法，也繼承了父類的原型
• （2）可傳參，函數(shù)可復(fù)用

缺點(diǎn)：

調(diào)用了兩次父類構(gòu)造函數(shù)

6、寄生組合繼承

通過寄生的方式，去掉了父類的實(shí)例屬性，在調(diào)用父類構(gòu)造函數(shù)時，

就不會初始化兩次實(shí)例方法，避免了組合繼承的缺點(diǎn)

function UserBase(userName){
 this.userName = userName
}
UserBase.prototype.showInfo = function(){
 console.log(this.userName)
}
function User (userName){
 UserBase.call(this,userName)
}
User.prototype = Object.create(UserBase.prototype)
User.prototype.constructor = User
let user = new User("鬼鬼")
user.showInfo(); 

7、Class繼承

class UserBase{
 constructor(userName){
  this.userName = userName
 }
 showInfo(){
  console.log(this.userName)
 }
}
class User extends UserBase{
 constructor(value){
  super(value) 
 }
}
var user = new User("鬼鬼")
user.showInfo();

參考資料

• https://blog.csdn.net/guoqing2016/article/details/106418081/
• http://www.bubuko.com/infodetail-2556919.html