前言

忘了整理的理一理。

ES5继承

先不涉及ES6的继承，后面会涉及。
这里主要是ES5的继承：

原型链继承
构造函数继承
组合继承
原型式继承
寄生式继承
寄生组合式继承

/**
 * 原型链继承
 */
console.log("----------------------------------原型链继承")
 const Man=function(){
     this.name="dad";
     this.sex='man';
     Man.prototype.say=function(){
         console.log("I am ",this.name);
     }
 }
 const pInstance=new Man();
 console.log(pInstance.constructor===Man); //true
 pInstance.say() //I am data

 const Child=function(){
     this.name="child";

 }
 Child.prototype=new Man();
 const cInstance=new Child();
 console.log(cInstance instanceof Man ) //true
 console.log(cInstance.constructor===pInstance.constructor) //true
 console.log(cInstance.constructor===Child) //false
 console.log("child:",cInstance.name) //child

原型链继承的一些问题：
1.因为继承是通过实例替换原型来到达的，那么实例原型的上的属性会被所以子类的实例所共享。
2.子类实例创建时，不能向父构造函数传递参数，因为会存在构造函数需要初始化参数的情况

/**
 * 构造函数继承
 */
console.log("----------------------------------构造函数继承")
const Man1=function(age){
    this.name="dad";
    this.sex='man';
    this.age=age;
}

const Child1=function(){
    Man1.call(this,11);
}
const cInstance1=new Child1();

console.log(cInstance1 instanceof Man1) //false
console.log(cInstance1)

构造函数继承的缺点
1.只能继承父类构造函数的属性，即父类原型的方法，子类也是无法调用的
2.无法实现构造函数的复用。因为1的原因，即方法需要在构造函数内生成，那么实例化每个函数都是独立的，即达不到复用的效果

/**
 * 组合继承 = 原型链继承+构造函数继承
 */
console.log("----------------------------------组合继承")
const Man2=function(){
    this.name="dad";
    this.sex='man';
}

const Child2=function(){
    
    Man2.call(this);
}
Child2.prototype=new Man2();
const cInstance2=new Child2();

console.log(cInstance2 instanceof Man2) //true
console.log(cInstance2.constructor===Child2)  //false
Child2.prototype.constructor=Child2;
console.log(cInstance2.constructor===Child2) //true

组合继承的缺点：
1.调用了两次构造函数，原型属性上会有重复的可能，即声明了多余的属性

/**
* 原型继承
*/
console.log("----------------------------------原型继承")
function createObj(obj){
    function O(){

    }
    O.prototype=obj;
    return new O();
}
const Man3=function(){
    this.name="dad";
    this.sex='man';
}
const mInstance3=new Man3();
const cInstance3=createObj(mInstance3);
console.log(cInstance3 instanceof Man3) //true
//所有的实例都会继承原型上的属性, 
//所有子类属性都是实例生成后添加的，无法复用

/**
 * 寄生继承
 */
console.log("----------------------------------寄生继承")

const Man4=function(){
    this.name="dad";
    this.sex='man';
}
const mIntance4=new Man4();

const createChild=function(obj){

    const childInstance=createObj(obj);
    // childInstance.name='child'
    childInstance.say=function(){
        console.log("I am",childInstance.name);
    }
    return childInstance;
}

const cIntance4=createChild(mIntance4);
cIntance4.say()

//无法复用，同构造函数继承

/**
 * 寄生组合继承
 */
console.log("----------------------------------寄生组合继承")

const Man5=function(){
    this.name="dad";
    this.sex='man';
}


const Child5=function(){
    Man5.call(this);
    this.sex="woman";
    this.age=11;
}
const ex=function(child,parent){
    const proto=Object.create(parent.prototype);
    // const proto=createObj(parent.prototype)
    proto.constructor=child;
    child.prototype=proto;
    
}
ex(Child5,Man5);

const cInstance5=new Child5();
console.log(cInstance5)
console.log(cInstance5 instanceof Man5); //true

//通过寄生的方式来解决组合继承中两次构造函数调用的问题

ES6继承

ES6的继承原理跟ES5的寄生组合继承有相似的地方。

class Parent {
  constructor(a){
    this.filed1 = a;
  }
  filed2 = 2;
  func1 = function(){}
}
class Child extends Parent {
    constructor(a,b) {
      super(a);
      this.filed3 = b;
    }
  
  filed4 = 1;
  func2 = function(){}
}


//babel 转换后

function _classCallCheck(instance,parent){ //es6class类的调用需要使用new的
 //instanceOf判断一个实例是否属于某种类型，也可以用来判断原型链
  if(!(instance instanceOf parent)){ 
     new TypeError("Cannot call a class as a function");
  }
}

var parent=function parent(a){ //可见class类的底层还是构造函数
   //_classCallCheck方法判断当前函数调用前是否有new关键字
    _classCallCheck(this,Parent); //this指向new出来的空对象
    this.filed1=a;
    this.filed2 = 2;
    this.func1 = function(){}
}
var Child = function (_Parent) {
  _inherits(Child, _Parent); //子类继承父类的proptype

  function Child(a, b) { //闭包保存父类的引用，在闭包中做子类的引用
    _classCallCheck(this, Child);//判断当前函数是否是使用new关键字调用

    //Child.__proto__ || Object.getPrototypeOf(Child)实际上是父构造函数(_inherits最后的操作),
   //然后通过call将其调用方改为当前this，并传递参数
    var _this = _possibleConstructorReturn(this, 
                (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, a));

    _this.filed4 = 1;

    _this.func2 = function () {};

    _this.filed3 = b;
    return _this;
  }
  return Child;
}(Parent);

function _inherits(sub,parent){
    //当parent不为函数时必须为空，或者是当parent不为空时必须为函数,否则类型错误
    if(typeOf parent!=="function" && parent!==null){
        throw new TypeError(
          "Super expression must either be null or a function,not " + typeof superClass
       );
    }
    sub.prototype=Object.Create(parent&&parent.prototype,{//寄生组合继承
        constructor:{ value: sub, enumerable: false, writable: true, configurable: true }       
    })
    if(parent){
        Object.setPrototypeOf ? Object.setPrototypeOf(sub,parent):sub.__proto__ =parent
    }
}

function _possibleConstructorReturn(self, call) {
  if (!self) {//校验this是否被初始化
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
}