日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
JS有哪些方式可以實(shí)現(xiàn)繼承?

[[401859]]

繼承的含義：

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

1、原型鏈繼承

 
 
 
 
    
  
  
  
  
  1. function UserBase(){ 
    2. 
  
  
  
  
  2. } 
    3. 
  
  
  
  
  3. function User(){ 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. User.prototype = new UserBase(); 
    6.

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

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

2、構(gòu)造繼承

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

 
 
 
 
    
  
  
  
  
  1. function UserBase(){ 
    2. 
  
  
  
  
  2. } 
    3. 
  
  
  
  
  3. function User(userName) { 
    4. 
  
  
  
  
  4.     UserBase.call(this); 
    5. 
  
  
  
  
  5.     this.userName = userName; 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. let user = new User("鬼鬼") 
    8. 
  
  
  
  
  8. user.userName; 
    9.

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

(1)可以向構(gòu)造函數(shù)傳參數(shù)

(2)可以實(shí)現(xiàn)多繼承，多call幾個(gè)

缺點(diǎn)：

(1)無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用

(2)只能繼承父類(lèi)的屬性和方法，不能繼承父類(lèi)的原型

3、實(shí)例繼承

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

 
 
 
 
    
  
  
  
  
  1. function UserBase(){ 
    2. 
  
  
  
  
  2. } 
    3. 
  
  
  
  
  3. function User(userName) { 
    4. 
  
  
  
  
  4.   let userBase = new UserBase(); 
    5. 
  
  
  
  
  5.   userBase.userName = userName; 
    6. 
  
  
  
  
  6.   return userBase; 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. let user = new User("鬼鬼") 
    9. 
  
  
  
  
  9. user.userName; 
    10.

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

4、拷貝繼承

 
 
 
 
    
  
  
  
  
  1. function UserBase(userName){ 
    2. 
  
  
  
  
  2. } 
    3. 
  
  
  
  
  3. UserBase.prototype.showInfo = function(){ 
    4. 
  
  
  
  
  4.  console.log(this.userName) 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. function User(userName) { 
    7. 
  
  
  
  
  7.  let userBase = new UserBase(); 
    8. 
  
  
  
  
  8.  for (let attr in userBase) { 
    9. 
  
  
  
  
  9.    User.prototype[attr] = userBase[attr]; 
    10. 
  
  
  
  
  10.  } 
    11. 
  
  
  
  
  11.  this.userName = userName; 
    12. 
  
  
  
  
  12. } 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. let user = new User("鬼鬼") 
    15. 
  
  
  
  
  15. user.showInfo(); 
    16.
  • 優(yōu)點(diǎn)：支持多繼承
  • 缺點(diǎn)：占用內(nèi)存高，因?yàn)橐胒or in循環(huán)來(lái)拷貝父類(lèi)屬性/方法

不可枚舉方法拷貝不了

5、組合繼承

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

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

 
 
 
 
    
  
  
  
  
  1. function UserBase(userName){ 
    2. 
  
  
  
  
  2.  this.userName = userName 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. UserBase.prototype.showInfo = function(){ 
    5. 
  
  
  
  
  5.  console.log(this.userName) 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. function User (userName){ 
    8. 
  
  
  
  
  8.     //call方式  
    9. 
  
  
  
  
  9.  UserBase.call(this,userName) 
    10. 
  
  
  
  
  10.      //apply方式  
    11. 
  
  
  
  
  11.     UserBase.apply(this,[userName]) 
    12. 
  
  
  
  
  12. } 
    13. 
  
  
  
  
  13. User.prototype = new UserBase() 
    14. 
  
  
  
  
  14. let user = new User("鬼鬼") 
    15. 
  
  
  
  
  15. user.showInfo();  
    16.

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

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

缺點(diǎn)：

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

6、寄生組合繼承

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

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

 
 
 
 
    
  
  
  
  
  1. function UserBase(userName){ 
    2. 
  
  
  
  
  2.  this.userName = userName 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. UserBase.prototype.showInfo = function(){ 
    5. 
  
  
  
  
  5.  console.log(this.userName) 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. function User (userName){ 
    8. 
  
  
  
  
  8.  UserBase.call(this,userName) 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10. User.prototype = Object.create(UserBase.prototype) 
    11. 
  
  
  
  
  11. User.prototype.constructor = User 
    12. 
  
  
  
  
  12. let user = new User("鬼鬼") 
    13. 
  
  
  
  
  13. user.showInfo();  
    14.

7、Class繼承

 
 
 
 
    
  
  
  
  
  1. class UserBase{ 
    2. 
  
  
  
  
  2.  constructor(userName){ 
    3. 
  
  
  
  
  3.   this.userName = userName 
    4. 
  
  
  
  
  4.  } 
    5. 
  
  
  
  
  5.  showInfo(){ 
    6. 
  
  
  
  
  6.   console.log(this.userName) 
    7. 
  
  
  
  
  7.  } 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9. class User extends UserBase{ 
    10. 
  
  
  
  
  10.  constructor(value){ 
    11. 
  
  
  
  
  11.   super(value)  
    12. 
  
  
  
  
  12.  } 
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14. var user = new User("鬼鬼") 
    15. 
  
  
  
  
  15. user.showInfo(); 
    16.

參考資料

https://blog.csdn.net/guoqing2016/article/details/106418081/

http://www.bubuko.com/infodetail-2556919.html

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


名稱欄目：JS有哪些方式可以實(shí)現(xiàn)繼承?
文章源于：http://www.5511xx.com/article/dpghjgo.html