基于原型实现继承

1.原型链继承

通过 [function].propto = new [function()] 的方式继承

引用类型的实例会被所有实例所共享
在创建 Child 的实例时，不能向 Parent 传参
Child.prototype = new Parent(); 把原型指向父级

function Parent() {
  this.names = ['kevin', 'daisy'];
}

function Child() {}

Child.prototype = new Parent();

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy", "yayu"]

2.借用构造函数(经典继承)

在需要继承的函数内部调用[function].call(this,arguments) 改变 this

避免了引用类型的属性被所有实例共享
可以在 Child 中向 Parent 传参
方法都在构造函数中定义，每次创建实例都会创建一遍方法。
Parent.call(this,'link') 把 this 指向 Parent

function Parent() {
  this.names = ['kevin', 'daisy'];
}

function Child() {
  Parent.call(this);
}

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy"]

组合继承

原型链继承和经典继承双剑合璧。

融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);

  this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

原型式继承

就是 ES5 Object.create 的模拟实现，将传入的对象作为创建的对象的原型。缺点：

包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

function createObj(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
var person = {
  name: 'kevin',
  friends: ['daisy', 'kelly'],
};

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = 'person1';
console.log(person2.name); // kevin

person1.friends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

注意：修改 person1.name 的值，person2.name 的值并未发生改变，并不是因为 person1 和 person2 有独立的 name 值，而是因为 person1.name = 'person1'，给 person1 添加了 name 值，并非修改了原型上的 name 值。

寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。

简单理解，寄生式继承就是返回一个包裹的函数

function createObj(o) {
  var clone = Object.create(o);
  clone.sayName = function () {
    console.log('hi');
  };
  return clone;
}

缺点：跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

寄生组合式继承

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

console.log(child1);

组合继承最大的缺点是会调用两次父构造函数。一次是设置子类型实例的原型的时候：

Child.prototype = new Parent();

一次在创建子类型实例的时候：

var child1 = new Child('kevin', '18');

回想下 new 的模拟实现，其实在这句中，我们会执行：

Parent.call(this, name);

在这里，我们又会调用了一次 Parent 构造函数。

所以，在这个例子中，如果我们打印 child1 对象，我们会发现 Child.prototype 和 child1 都有一个属性为 colors，属性值为['red', 'blue', 'green']。

那么我们该如何精益求精，避免这一次重复调用呢？

如果我们不使用 Child.prototype = new Parent() ，而是间接的让 Child.prototype 访问到 Parent.prototype 呢？

看看如何实现：

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

// 关键的三步
var F = function () {};

F.prototype = Parent.prototype;

Child.prototype = new F();

var child1 = new Child('kevin', '18');

console.log(child1);

最后我们封装一下这个继承方法：

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function prototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

// 当我们使用的时候：
prototype(Child, Parent);

寄生组合式继承实例

function Person(name = 'person') {
  this.category = 'human';
  this.legNum = 2;
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log('Hi,i am ' + this.name);
};

function inherit(subType, superType) {
  //在new inheritFn 的时候将构造函数指向子类
  function inheritFn() {
    this.constructor = subType;
  }
  inheritFn.prototype = superType.prototype;
  //将子类的原型指向父类原型的一个副本
  subType.prototype = new inheritFn();
}

//定义子类构造函数Pan
function Pan(name, age) {
  Person.call(this, name); //借用构造函数
  this.age = age;
}

//将子类Pan的原型指向父类Person原型的一个副本
//注意：要执行该动作后才能在Pan的prototype上定义方法，否则没用
inherit(Pan, Person);

Pan.prototype.sayAge = function () {
  console.log(this.age);
};

//定义子类构造函数Duan
function Duan(name, hairColor) {
  Person.call(this, name);
  this.hairColor = hairColor;
}

inherit(Duan, Person);

Duan.prototype.showHairColor = function () {
  console.log(this.hairColor);
};
//Pan的实例
var pan = new Pan('panfengshan', 27);
console.log(pan.name); //panfengshan
console.log(pan.age); //27
console.log(pan.category); //human
console.log(pan.legNum); //2

pan.sayHello(); //Hi,i am panfengshan
pan.sayAge(); //27

//Duan的实例
var duan = new Duan('duanyanan', 'black');
console.log(duan.name); //duanyanan
console.log(duan.hairColor); //black
console.log(pan.category); //human
console.log(pan.legNum); //2

duan.sayHello(); //Hi,i am duanyanan
duan.showHairColor(); //black