js中的继承

实现继承首先需要一个父类,在js中实际上是没有类的概念,在es6中class虽然很像类,但实际上只是es5上语法糖而已

原型链继承

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

function Woman(){ 
}
Woman.prototype= new People();
Woman.prototype.name = 'haixia';
let womanObj = new Woman();
优点
  • 简单易于实现,父类的新增的实例与属性子类都能访问
缺点
  1. 可以在子类中增加实例属性,如果要新增加原型属性和方法需要在new 父类构造函数的后面
  2. 无法实现多继承
  3. 创建子类实例时,不能向父类构造函数中传参数
借用构造函数继承(伪造对象、经典继承)
  • 复制父类的实例属性给子类
function Woman(name){
 //继承了People
  People.call(this); //People.call(this,'tom); 
  this.name = name || 'kitty'
}
let womanObj = new Woman();
优点
  1. 解决了子类构造函数向父类构造函数中传递参数
  2. 可以实现多继承(call或者apply多个父类)
缺点
  1. 方法都在构造函数中定义,无法复用
  2. 不能继承原型属性/方法,只能继承父类的实例属性和方法
实例继承(原型式继承)
function Wonman(name){
  let instance = new People();
  instance.name = name || 'wangxiaoxia';
  return instance;
}
let wonmanObj = new Wonman();
优点
  1. 不限制调用方式
  2. 简单,易实现
缺点
  1. 不能多次继承
组合式继承
  1. 调用父类构造函数,继承父类的属性,通过将父类实例作为子类原型,实现函数复用
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(); 
优点
  1. 函数可以复用
  2. 不存在引用属性问题
  3. 可以继承属性和方法,并且可以继承原型的属性和方法
缺点
  1. 由于调用了两次父类,所以产生了两份实例
寄生组合继承

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

//父类
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)
}
//继承父类方法
(function(){
  // 创建空类
  let Super = function(){};
  Super.prototype = People.prototype;
  //父类的实例作为子类的原型
  Woman.prototype = new Super();
})();
//修复构造函数指向问题
Woman.prototype.constructor = Woman;
let womanObj = new Woman();
es6继承

代码量少,易懂

//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();
上一篇:用另一个数组过滤一个数组-JavaScript


下一篇:SpringDataJpa根据多个id物品清单id查询房源编号