一篇文章让你了解ES5的所有继承

一、原型链继承

function Person(){}

function Student(){}

Student.prototype = new Person()

让子类构造函数的原型对象，成为父类构造函数的实例，子类的实例通过原型链访问父类原型对象上的属性和方法。

原型链有两个问题：
1.实例共享引用类型
实例上有引用类型，所有实例都会共享这个引用类型

function parent(){
this.newArr = ['a','b']
}
function child(){
    this.name  = 'tom';
}
child.prototype = new parent();

let p1 = new child();
p1.newArr.push('c');
console.log(p1);//['a','b','c'];

let p2 = new child();
console.log(p2); //['a','b','c'];

普通类型

function parent(){
    this.name = 'tom'
}
function child(){
    this.age  = 18;
}
child.prototype = new parent();

let p1 = new child();
p1.age = 19;
console.log(p1);// {age:19,__proto__:{name:'tom'}};

let p2 = new child();
console.log(p2);//{age:18,__proto__:{name:'tom'}};

在创建子类型时，无法向父类的构造函数传递参数
直接打印对象是看不到这些属性的

二、构造函数继承（经典继承）

构造函数继承的本质：在子类构造函数内部调用父类构造函数

function Person(name) {
  this.name = name
  this.color = ['red', 'yellow', 'blue']
}

function Student (name) {
  Person.call(this, name)
}

let stu1 = new Student('guoguo')
stu1.color.push('green')
console.log(stu1) 
// {name:'guoguoguo', color: ['red', 'yellow', 'blue', 'green']}

let stu2 = new Student('yuyuyu')
console.log(stu2)  
// {name:'guoguoguo', color: ['red', 'yellow', 'blue']}

经典继承可以解决原型链继承不能向父类传参和实例共享引用类型值问题，但是它的缺点：实例无法共享父类原型对象上的方法和属性

三、组合式继承

组合式继承的本质：将原型链继承和构造函数继承组合到一起，借用构造函数来实现对实例属性的继承，借用原型链继承实现对原型对象的属性和方法的继承

  function Parent (name) {
    this.name = name
    this.friend = ['lucky']
  }

  Parent.prototype.getFriend = function() {
    console.log('找呀找呀找朋友', this.friend)
  }

  function Student (name) {
    Parent.call(this, name)
  }

  Student.prototype = new Parent('tom')
  let stu1 = new Student('lily')

  console.log(stu1)

组合继承避免了原型链和构造函数的缺点，融合了他们的优点，成为js最常见的继承模式，但它依然不是很完美。
组合继承的缺点：

组合继承会调用两次父类构造函数，一次是在创建子类原型的时候，另一次是在子类构造函数内部，也就是每次创建子类实例的时候。
所有的子类实例会拥有两份父类的属性，一份在当前自己的实例里面(stu1里面)，另一份在子类对应的原型对象中(也就是stu1.proto)。当然这两份属性我们无需担心访问出现问题，因为默认一定是访问实例本身这一部分的。

四、原型式继承

原型式继承的原理：在create函数内部，先创建一个临时性的构造函数，将传入的对象作为这个构造函数的原型，然后返回这个临时构造函数的新实例。本质上讲，Create对其传入的对象执行了一次浅复制。

function Create (obj) {
  function Fun() {}
  Fun.prototype = obj
  return new Fun()
} 

let person = { name: [1, 2, 3]}

let another1 = Create(person)

another1.name.push(4)

let another2 = Create(person)

console.log(another1.name) // [1, 2, 3, 4]
console.log(another2.name) // [1, 2, 3, 4]

原型式继承,包含引用类型值的属性，始终都会共享相应的值，就像使用引用类型一样

五、寄生式继承

寄生式继承的思路：结合原型式继承和工厂模式的一种方式，创建一个封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再将这个对象返回

function Create (obj) {
  function Fun () {}
  Fun.prototype = obj
  return new Fun()
}

function CreateAnother (obj) {
  let clone = Create(obj)
  clone.sayHi = function () {}
  return clone
}

函数的主要作用就是为构造函数新增属性和方法，以增强对象

let person1 = {name: 'guojing'}
let p1 = CreateAnother(person1)
console.log(p1) // 普通类型

let person2 = {newArr: [1, 2, 3, 4]} //引用类型
let p2 = CreateAnother(person2)
p2.newArr.push(5)
console.log(person2)
console.log(p2)

缺点：

原型式继承多个实例的引用类型属性指向相同，存在篡改的可能
无法传递参数

六、寄生组合式继承

前面说的组合式继承是js中最常见的继承模式，不过他也有自己的不足，组合式继承最大的问题是：无论什么情况下，都会调动两次构造函数；一次是创建子类原型的时候，另一次是在子类构造函数内部。寄生组合式继承就是为了降低父类构造函数的开销而出现的。

借用构造函数来继承属性，通过原型链的混合模式来继承方法，其背后的思路是：
不必为了执行子类型的原型而调用父类构造函数，使用寄生式继承来继承父类的原型，然后将结果指定给子类型的原型

function Person (name) {
  this.name = name
}

Person.prototype.sayName = function () {
  console.log(this.name)
}

function Student (name) {
  Person.call(this, name) // 注释1
  this.name = name
}

Student.prototype = Object.create(Person.prototype) // 注释2
Student.prototype.constructor = Student // 注释3

注释1: 在子类构造函数里调用父类的构造函数，继承构造函数属性的继承，并可以给父类构造函数传参
注释2: 建立子类原型对象和父类原型对象的连接，通过Object.create方法对父类原型进行浅复制，再复制给子类原型
注释3: 通过以上操作，Student.prototype.constructor指向的是Person,再进行增强原型，将constructor指向Student