JS的继承

JS的4中继承方法：

• 原型继承；
• 组合继承；
• 寄生组合继承；
• ES6的extend。

1. 原型继承

原理：把父类的实例作为子类的原型。
缺点：子类的实例共享了父类构造函数的引用属性，不能传参。

var person = {
  friends: ["a", "b", "c", "d"];
}
 
var p1 = Object.create(person);
p1.friends.push("aaa");
 
console.log(p1.__proto__ == person);//true
console.log(p1);// {}
console.log(person);//{ friends: [ 'a', 'b', 'c', 'd', 'aaa' ] }

2. 组合继承

原理：在子函数中运行父函数，但是要利用call把this改变一下，再在子函数的prototype里面new Father() ,使Father的原型中的方法也得到继承，最后改变Son的原型中的constructor。（详解：原型的继承）
缺点：调用了两次父类的构造函数，造成了不必要的消耗，父类方法可以复用。
优点：可传参，不共享父类引用属性。

function Father(name) {
  this.name = name;
  this.hobby = ["篮球", "足球", "乒乓球"];
}

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

function Son(name, age) {
  Father.call(this, name);
  this.age = age;
}

Son.prototype = new Father()
Son.prototype.constructor = Son;

var s = new Son("xiaoming", 20)
console.log(s);//Son { name: 'xiaoming', hobby: [ '篮球', '足球', '乒乓球' ], age: 20 }

3. 寄生组合继承

function Father(name) {
  this.name = name;
  this.hobby = ["篮球", "足球", "乒乓球"];
}

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

function Son(name, age) {
  Father.call(this, name);
  this.age = age;
}

Son.prototype = Object.create(Father.prototype);
Son.prototype.constructor = Son;

var s2 = new Son("xiaoming", 18);
console.log(s2);//Son { name: 'xiaoming', hobby: [ '篮球', '足球', '乒乓球' ], age: 18 }

4. ES6的extend(寄生组合继承的语法糖)

原理：子类只要继承父类，可以不写 constructor ，一旦写了，则在 constructor 中的第一句话,必须是 super 。

class Son3 extends Father { // Son.prototype.__proto__ = Father.prototype
  constructor(y) {
    super(200)  // super(200) => Father.call(this,200)
    this.y = y
  }
}