js 继承

1.原型链继承

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

function Woman(){ 
}
Woman.prototype= new People();
Woman.prototype.name = 'haixia';
let womanObj = new Woman();

优点:

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

缺点:

  • 可以在子类中增加实例属性,如果要新增加原型属性和方法需要在new 父类构造函数的后面

  • 无法实现多继承

  • 创建子类实例时,不能向父类构造函数中传参数

2.构造函数继承 

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

function Woman(name){
 //继承了People
  People.call(this); //People.call(this,'tom); 
  this.name = name || 'kitty'
}
let womanObj = new Woman();

优点:

  • 解决了子类构造函数向父类构造函数中传递参数

  • 可以实现多继承(call或者apply多个父类)

缺点:

  • 方法都在构造函数中定义,无法复用

  • 不能继承原型属性/方法,只能继承父类的实例属性和方法

3.组合式继承 

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

function People(name,age){
  this.name = name || 'wangxiao'
  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;
let wonmanObj = new Woman(ren,27);
wonmanObj.eat(); 

缺点:

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

优点:

  • 函数可以复用

  • 不存在引用属性问题

  • 可以继承属性和方法,并且可以继承原型的属性和方法

 4.es6 class继承

       首先利用class构造一个父类,然后利用extends与super实现子类继承

       代码量少,易懂

//class 相当于es5中构造函数
//class中定义方法时,前后不能加function,全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法,不能定义对象,变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性
class People{
  constructor(name='wang',age='27'){
    this.name = name;
    this.age = age;
  }
  eat(){
    console.log(`${this.name} ${this.age} eat food`)
  }
}
//继承父类
class Woman extends People{ 
   constructor(name = 'ren',age = '27'){ 
     //继承父类属性
     super(name, age); 
   } 
    eat(){ 
     //继承父类方法
      super.eat() 
    } 
} 
let wonmanObj=new Woman('xiaoxiami'); 
wonmanObj.eat();

 ES5继承和ES6继承的区别:

ES5继承:

利用原型链让一个引用类型继承另一个引用类型的属性和方法(即通过prototype和构造函数实现)
实质:将父类添加到子类的原型链上去

ES6继承:

通过extend关键字实现继承,子类可以继承父类中所有的方法和属性,子类必须在construc()方法中调用super()方法,因为新建的子类没有自己的this对象,而是继承了父类的this对象;

实质:利用extend关键字继承父类,然后继承父类的属性和方法

使用:

解决代码的复用
使用extends关键字实现继承
子类可以继承父类中所有的方法和属性
子类只能继承一个父类(单继承),一个父类可以有多个子类
子类的构造方法中必须有super()来指定调用父类的构造方法,并且位于子类构造方法中的第一行
子类中如果有与父类相同的方法和属性,将会优先使用子类的(覆盖)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值