JS有哪些方式可以实现继承?

[[401859]]

继承的含义:

继承是面向对象编程中的一个重要概念,通过继承可以使子类的实例拥有在父类中定义的属性和方法。

1、原型链继承

 
 
 
 
  1. function UserBase(){ 
  2. function User(){ 
  3. User.prototype = new UserBase(); 

将父类的实例作为子类的原型。

  • (1)不能向构造函数传参,无法实现多继承
  • (2)来自原型对象的引用属性是所有实例共享的

2、构造继承

实际上使用父类的构造函数来增强子类,等于是把父类的构造函数复制给子类。

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

优点:

(1)可以向构造函数传参数

(2)可以实现多继承,多call几个

缺点:

(1)无法实现函数复用

(2)只能继承父类的属性和方法,不能继承父类的原型

3、实例继承

为父类实例添加新属性,作为子类实例返回。

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

缺点:无法实现多继承

4、拷贝继承

 
 
 
 
  1. function UserBase(userName){ 
  2. UserBase.prototype.showInfo = function(){ 
  3.  console.log(this.userName) 
  4. function User(userName) { 
  5.  let userBase = new UserBase(); 
  6.  for (let attr in userBase) { 
  7.    User.prototype[attr] = userBase[attr]; 
  8.  } 
  9.  this.userName = userName; 
  10.  
  11. let user = new User("鬼鬼") 
  12. user.showInfo(); 
  • 优点:支持多继承
  • 缺点:占用内存高,因为要用for in循环来拷贝父类属性/方法

不可枚举方法拷贝不了

5、组合继承

通过调用父类构造函数,继承了父类的属性,并保留了传参的优点。

然后再将父类实例作为子类原型,实现了函数复用。

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

优点:

  • (1)继承父类的属性和方法,也继承了父类的原型
  • (2)可传参,函数可复用

缺点:

调用了两次父类构造函数

6、寄生组合继承

通过寄生的方式,去掉了父类的实例属性,在调用父类构造函数时,

就不会初始化两次实例方法,避免了组合继承的缺点

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

7、Class继承

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

参考资料

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

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

本文转载自微信公众号「前端人」,可以通过以下二维码关注。转载本文请联系前端人公众号。

新闻标题:JS有哪些方式可以实现继承?
链接分享:http://www.shufengxianlan.com/qtweb/news11/463061.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联