js继承方法

js继承的方式

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

function Parent(name){
  //属性
  this.name  = name || Annie
  //实例方法
  this.sleep=function(){
    console.log(this.name + '正在睡觉')
  }
}
//父类原型方法
Parent.prototype.eat = function(food){
  console.log(this.name + '正在吃：' + food);
}

1.原型链继承
父类的实例作为子类的原型

function Child(){ 
}
child.prototype= new Child();
child.prototype.name = 'haixia';
let childObj = new Child();

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

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

2.借用构造函数继承（伪造对象、经典继承）

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

function Child(name){
 //继承了Parent
  Parent.call(this);         //Parent.call(this，'wangxiaoxia'); 
  this.name = name || 'renbo'
}
let childObj = new Child();

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

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

3.实例继承（原型式继承）

function Child(name){
  let instance = new Parent();
  instance.name = name || 'wangxiaoxia';
  return instance;
}
let childObj = new Child();

优点：
不限制调用方式
简单，易实现

缺点：不能多次继承

4.组合式继承

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

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

function Child(name,age){
  Parent.call(this,name,age)
}
Child.prototype = new People();
Child.prototype.constructor = Child;
let childObj = new Child(ren,27);
childObj.eat(); 

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

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

5.寄生组合继承

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

//父类

function Parent(name,age){
  this.name = name || 'wangxiao'
  this.age = age || 27
}
//父类方法
Parent.prototype.eat = function(){
  return this.name + this.age + 'eat sleep'
}
//子类
function Child(name,age){
  //继承父类属性
  Parent.call(this,name,age)
}

//继承父类方法

(function(){
  // 创建空类
  let Super = function(){};
  Super.prototype = Parent.prototype;
  //父类的实例作为子类的原型
  Child.prototype = new Super();
})();
//修复构造函数指向问题
Child.prototype.constructor = Child;
let childObj = new Child();

6.es6继承
//class 相当于es5中构造函数
//class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法，不能定义对象，变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性

class Parent{
  constructor(name='wang',age='27'){
    this.name = name;
    this.age = age;
  }
  eat(){
    console.log(`${this.name} ${this.age} eat food`)
  }
}

//继承父类

class Child extends Parent{ 
   constructor(name = 'ren',age = '27'){ 
     //继承父类属性
     super(name, age); 
   } 
    eat(){ 
     //继承父类方法
      super.eat() 
    } 
} 
let childObj=new Parent('xiaoxiami'); 
childObj.eat();

ES5继承和ES6继承的区别:
es5继承首先是在子类中创建自己的this指向，最后将方法添加到this中

Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)

es6继承是使用关键字先创建父类的实例对象this，最后在子类class中修改this

es6中很多代码的语法糖，很多方法简单易用。在浏览器兼容的情况下，改变原有方式。

虽然现在很多框架都是es6，但对于初学者还是建议多看看es5中实现的原理。