js继承的几种方式

    继承,顾名思义就是子类通过一定的方式拥有父类的属性和方法,继承在js中占有非常重要的地位,那么在js中有很多中继承的方式,不过每一种继承方式都有优缺点。下面就列举几种继承的方式。

定义父类
function People(name){
  //属性
  this.name  = name || Jack
  //实例方法
  this.sleep=function(){
    console.log(this.name + '正在睡觉')
  }
}
//原型方法
People.prototype.eat = function(food){
  console.log(this.name + '正在吃:' + food);
}
原型链继承

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

function Woman(){ 
}
Woman.prototype= new People();
Woman.prototype.name = 'Tom';
var womanObj = new Woman();

优点:
简单易于实现,父类的新增的实例与属性子类都能访问

缺点:
可以在子类中增加实例属性,如果要新增加原型属性和方法需要在new 父类构造函数的后面
无法实现多继承
创建子类实例时,不能向父类构造函数中传参数

借用构造函数继承(伪造对象、经典继承)

复制父类的实例属性给子类

function Woman(name){
 //继承了People
  People.call(this); 
  this.name = name || 'renbo'
}
var womanObj = new Woman();

优点:
解决了子类构造函数向父类构造函数中传递参数
可以实现多继承(call或者apply多个父类)

缺点:
方法都在构造函数中定义,无法复用
不能继承原型属性/方法,只能继承父类的实例属性和方法

实例继承(原型式继承)
function Wonman(name){
  let instance = new People();
  instance.name = name || 'jack';
  return instance;
}
var wonmanObj = new Wonman();

优点:
不限制调用方式
简单,易实现

缺点:不能多次继承

组合式继承

调用父类构造函数,继承父类的属性,通过将父类实例作为子类原型,实现函数复用

function People(name,age){
  this.name = name || 'jack'
  this.age = age || 27
}
People.prototype.eat = function(){
  return this.name + this.age + 'eat sleep'
}

function Woman(name,age){
  People.call(this,name,age)
}
Woman.prototype = new People();
Woman.prototype.constructor = Woman;
var wonmanObj = new Woman(ren,27);
wonmanObj.eat(); 

缺点:
由于调用了两次父类,所以产生了两份实例

优点:
函数可以复用
不存在引用属性问题
可以继承属性和方法,并且可以继承原型的属性和方法

寄生组合继承

通过寄生的方式来修复组合式继承的不足,完美的实现继承

//父类
function People(name,age){
  this.name = name || 'jack'
  this.age = age || 27
}
//父类方法
People.prototype.eat = function(){
  return this.name + this.age + 'eat sleep'
}
//子类
function Woman(name,age){
  //继承父类属性
  People.call(this,name,age)
}
//继承父类方法
(function(){
  // 创建空类
  var Super = function(){};
  Super.prototype = People.prototype;
  //父类的实例作为子类的原型
  Woman.prototype = new Super();
})();
//修复构造函数指向问题
Woman.prototype.constructor = Woman;
var womanObj = new Woman();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值