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

继承的有方含义：

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

1、继承原型链继承

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

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

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

2、构造继承

实际上使用父类的有方构造函数来增强子类，等于是网站模板式可实现把父类的构造函数复制给子类。

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

优点：

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

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

缺点：

(1)无法实现函数复用

(2)只能继承父类的有方属性和方法，不能继承父类的式可实现原型

3、实例继承

为父类实例添加新属性，继承作为子类实例返回。有方

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

缺点：无法实现多继承

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();  优点：支持多继承 缺点：占用内存高，继承因为要用for in循环来拷贝父类属性/方法

不可枚举方法拷贝不了

5、组合继承

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

然后再将父类实例作为子类原型，香港云服务器实现了函数复用。

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();  

优点：

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

缺点：

调用了两次父类构造函数

6、寄生组合继承

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

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

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

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

云服务器提供商

很赞哦!（79）