js继承的六种方式

一、原型链继承

特点： 1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新 实例不会继承父类实例的属性！

缺点： 1、新实例无法向父类构造函数传参。

2、继承单一。

3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属 性，另一个实例的原 型属性也会被修改！）

// 父类： 公共属性和方法
function Father(name) {
  this.name = name || "zosi"
  this.arr = [1]
}
Father.prototype.say = function(){
  console.log(this.name + " say hello world!");
}
// 子类： 独有属性和方法
function Child(height) {
  this.height = height || 180
}
//继承父类
Child.prototype = new Father()

Child.prototype.run = function() {
  console.log(this.name + " running! " + this.height);
}
var child1 = new Child("lemon", 170)
var child2 = new Child(160)

child1.say();//zosi say hello world!
child2.run();//zosi running! 160
child1.arr.push(2)
console.log(child1.name, child2.arr, child1, child2);//zosi [1, 2] Child {height: 'lemon'} Child {height: 160}

二、借用构造函数继承

重点： 用 .call()和.apply() 将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复 制））

特点： 1、只继承了父类构造函数的属性，没有继承父类原型的属性。

2、解决了原型链继承缺点 1、2、3。

3、可以继承多个构造函数属性（call 多个）。

4、在子实例中可向父实例传参。

缺点： 1、只能继承父类构造函数的属性。

2、无法实现构造函数的复用。（每次用每次都要重新调用）

3、每个新实例都有父类构造函数的副本，臃肿。

// 父类： 公共属性和方法
function Father(name) {
  this.name = name || "zosi"
  this.arr = [1]
}
Father.prototype.say = function(){
  console.log(this.name + " say hello world!");
}
// 子类： 独有属性和方法
function Child(name, height) {
  //继承父类
  Father.call(this, name)
  this.height = height || 180
}

Child.prototype.run = function() {
  console.log(this.name + " running! " + this.height);
}
var child1 = new Child("lemon")
var child2 = new Child("Jack", 160)

// child1.say();//报错
child2.run();//Jack running! 160
child1.arr.push(2)
console.log(child1.arr, child2.arr, child1, child2);//[1, 2] [1] Child {name: 'lemon', arr: Array(2), height: 180} Child {name: 'Jack', arr: Array(1), height: 160}

三、组合继承（组合原型链继承和借用构造函数继承）（常用）

重点： 结合了两种模式的优点，传参和复用

特点： 1、可以继承父类原型上的属性，可以传参，可复用。

2、每个新实例引入的构造函数属性是私有的。

缺点： 调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函 数。

// 父类： 公共属性和方法
function Father(name) {
  this.name = name || "zosi"
  this.arr = [1]
}
Father.prototype.say = function(){
  console.log(this.name + " say hello world!");
}
// 子类： 独有属性和方法
function Child(name, height) {
  //继承属性
  Father.call(this, name)
  this.height = height || 180
}
// 继承方法
Child.prototype = new Father()
Child.prototype.run = function() {
  console.log(this.name + " running! " + this.height);
}
var child1 = new Child("lemon")
var child2 = new Child("Jack", 160)

child1.say();//lemon say hello world!
child2.run();//Jack running! 160
child1.arr.push(2)
console.log(child1.arr, child2.arr, child1, child2);//[1, 2] [1] Child {name: 'lemon', arr: Array(2), height: 180} Child {name: 'Jack', arr: Array(1), height: 160}

四、原型式继承

重点： 用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的 实例或对象。object.create()就是这个原理。

特点： 类似于复制一个对象，用函数来包装。

缺点： 1、所有实例都会继承原型上的属性。 2、无法实现复用。（新实例属性都是后面添加的）

var person = {
  name: "Jack",
  friends: ["Marry"]
}
// 方法一：作者-> Douglas Crockford - 2006
function object(o){
  function F(){}
  F.prototype = o
  return new F()
}//object()对传入的对象进行了一次浅拷贝
var p1 = object(person)
p1.friends.push("Jane")
var p2 = object(person)
p2.friends.push("Larry")
console.log(p1.friends);//['Marry', 'Jane', 'Larry']

// 方法二：Object.setPrototypeOf()
function creatObject(o) {
  let newObj = {}
  Object.setPrototypeOf(newObj, o)
  return newObj
}
var p1 = creatObject(person)
p1.friends.push("Bob")
var p2 = creatObject(person)
p2.friends.push("Chansen")
console.log(p1.friends);//['Marry', 'Bob', 'Chansen']

// 方法三：ES5 -> Object.create() 接受两个参数，第二个参数可以添加或者覆盖属性
var p1 = Object.create(person)
p1.friends.push("Sale")
var p2 = Object.create(person, {
  name: {
    value: "Mieba"
  }
})
p2.friends.push("Jordan")
console.log(p1.friends, p2.name);// ['Marry', 'Sale', 'Jordan'] 'Mieba'

五、class 类实现继承

通过 extends 和 super 实现继承

六、寄生式继承

重点： 就是给原型式继承外面套了个壳子。

优点： 没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成 了创建的新对象。

缺点： 没用到原型，无法复用。

var person = {
  name: "Jack",
  friends: ["Marry"],
  run: function() {
    console.log("run run run!");
  }
}

function createPerson(obj){
  let p = Object.create(obj)
  p.say = function() {
    console.log("say hello world!");
  }
  return p
}

var p1 = createPerson(person)
p1.run();//run run run!
p1.friends.push("Jerry")
var p2 = createPerson(person)
p2.say();//say hello world!
console.log(p1.name, p2.friends);//Jack ['Marry', 'Jerry']

七. 寄生组合式继承(推荐)

//封装继承方法
function inheritPrototype(subType, superType) {
  let prototype = Object.create(superType.prototype);//创建对象
  prototype.constructor = subType;//增强对象
  subType.prototype = prototype;//赋值对象
}

// 父类： 公共属性和方法
function Father(name) {
  this.name = name || "zosi"
  this.arr = [1]
}
Father.prototype.say = function(){
  console.log(this.name + " say hello world!");
}
// 子类： 独有属性和方法
function Child(name, height) {
  //继承属性
  Father.call(this, name)
  this.height = height || 180
}
// 继承方法
inheritPrototype(Child, Father)
Child.prototype.run = function() {
  console.log(this.name + " running! " + this.height);
}
var child1 = new Child("lemon")
var child2 = new Child("Jack", 160)

child1.say();//lemon say hello world!
child2.run();//Jack running! 160
child1.arr.push(2)
console.log(child1.arr, child2.arr, child1, child2);// [1, 2] [1] Child {name: 'lemon', arr: Array(2), height: 180} Child {name: 'Jack', arr: Array(1), height: 160}