[[401859]]

繼承的含義：

繼承是面向?qū)ο缶幊讨械囊粋€(gè)重要概念，通過繼承可以使子類的實(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幾個(gè)

缺點(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í)，

就不會初始化兩次實(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

本文轉(zhuǎn)載自微信公眾號「前端人」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端人公眾號。

分享標(biāo)題：JS有哪些方式可以實(shí)現(xiàn)繼承?
文章網(wǎng)址：http://uogjgqi.cn/article/dpghjgo.html