JavaScript之深入多种继承方式
一、前言
上一篇文章讲解了JavaScript之深入原型与原型链，继承本质就是在构造函数和原型上进行一系列的操作，以达到子类能访问到父类的属性和方法。下面会介绍多种继承方式，及每种继承的优缺点。
二、构造函数继承
构造函数的继承使用.call()或.apply()方法，在子类中调用父类的构造函数，本质上是在子类中引用父类的构造函数，初始化父类构造函数。代码如下
function Person(name) {
this.name = name;
this.show = function() {
console.log(`构造函数中的方法：${this.name}`);
}
}
Person.prototype.showName = function() {
console.log(`原型链上的方法： ${this.name}`);
}
function Man(name) {
Person.call(this, name);
}
const m = new Man('chicABoo');
console.log(m instanceof Man); // true
console.log(m instanceof Person); // false
m.show(); // 构造函数中的方法：chicABoo
m.showName(); // typeError: m.showName is not a function
上面的代码定义了一个Person构造函数，Person中有属性name和show方法，Person的原型对象上定义了showName方法；构造函数Man中通过.call()的方法，初始化了父类的构造函数，即能Man继承了父类的构造函数。
优点：
1、子类能成功继承到父类的构造函数；
2、子类能继承多个父类的构造函数；
3、可以通过call或apply方法向父类传参；
缺点：
1、只能继承到父类构造函数的属性和方法，无法继承原型链上的属性和方法；
2、每个新的实例都会创建父类的副本；
3、无法实现构造函数的复用，每次都要调用；
三、原型链继承
原型链继承的方式，通过子类的原型对象去指向父类的实例，这样能继承到父类原型链上的属性和方法，代码如下
function Person() {}
Person.prototype.name = 'chicAboo';
Person.prototype.showName = function() {
console.log(this.name);
};
function Man() {}
Man.prototype = new Person(); // 关键代码
const p = new Person();
p.age = 35;
const m = new Man();
m.showName(); // chicAboo
console.log(m instanceof Man); // true
console.log(m instanceof Person); // true
console.log(m.age); // undefined
原型链继承，通过子类的原型对象等于父类的实例，实现继承。
优点：
1、子类可继承父类构造函数中的属性、原型链上的属性和方法。
缺点：
1、子类创建的实例无法向父类传参；
2、父类引用类型的属性被所有实例所共享；如下：
function Person() {}
Person.prototype.names = [];
Person.prototype.showName = function() {
console.log(this.names);
};
function Man() {}
Man.prototype = new Person(); // 关键代码
const m1 = new Man();
m1.names.push('张三');
const m2 = new Man();
m2.showName(); // ['张三']
从上面例子能看到，在父类Person的原型链上是引用类型即时，在子类实例m1上push一个值，m2也能访问。
三、组合继承
原型链继承和构造函数继承，都存在致命的缺点，原型链继承不能传参、原型链上属性为引用类型时会被所有的实例所共享；构造函数继承，只能继承到构造函数的属性和方法，每次创建实例，父类都重新生成一遍。为了解决这些问题，将它们组合起来使用，便解决了这些问题，同时组合继承也是JavaScript最常用的继承方式。
function Person(name) {
this.name = name;
this.names = [];
}
Person.prototype.showName = function() {
console.log(this.name);
};
function Man(name, age) {
Person.call(this, name);
this.age = age;
}
Man.prototype.showAge = function () {
console.log(this.age);
};
Man.prototype = new Person; // 原型链继承关键代码
Man.prototype.constructor = Man; // Man的原型对象的constructor指向Person，需手动指回来
const m1 = new Man('张三', 20);
const m2 = new Man('李四', 25);
m1.names.push(100);
console.log(m2.names); // []
优点：
1、结合了前两种构造函数的优点，构造函数继承传参和原型链继承复用；
2、每个实例引用的构造函数属性都是私有的；
缺点：
1、调用了两次父类构造函数，Person.call(this)和Man.prototype = new Person()
2、子类上的构造函数会代替父类原型链上的构造函数（这不能算是缺点，上章讲过，类中查找属性和方法时，现在构造函数中查找，如果找不到，才会在原型链上查找，直到找到为止）
四、原型式继承
function create(obj) {
function F() {}
F.prototype = obj;
return new F();
}
用函数包装一个对象，返回这个函数的调用。ES5中Object.create的模拟实现，将传入对象作为创建对象的原型。
缺点：
1、 引用类型的属性值，会被所有的实例所共享，类似原型链。如下：
function create(obj) {
function F() {}
F.prototype = obj;
return new F();
}
const obj = {
name: 'chicABoo',
names: ['zs', 'ls']
};
const c1 = create(obj);
const c2 = create(obj);
c1.names.push('ww');
console.log(c2.names); // ['zs', 'ls', 'ww]
五、寄生式继承
创建一个用于继承过程的封装函数，该函数内部以某种形式来做增强函数，返回该对象。
function createObj (obj) {
const clone = Object.create(obj);
clone.show = function () {
console.log('something...');
};
return clone;
}
这种方式类似构造函数继承，每次创建就会创建父类的构造函数。
缺点：
1、没有原型，无法复用；
2、每次都会创建一遍父类的构造函数；
六、寄生组合式继承（常用）
寄生组合在继承修正了组合继承调用两次父类问题，那么如何修正的呢？先看下组合继承，如下：
function Person(name) {
this.name = name;
this.names = [];
}
Person.prototype.showName = function() {
console.log(this.name);
};
function Man(name, age) {
Person.call(this, name); // 第二次调用父类
this.age = age;
}
Man.prototype.showAge = function () {
console.log(this.age);
};
Man.prototype = new Person(); // 第一次调用父类
Man.prototype.constructor = Man;
const m1 = new Man('张三', 20);
const m2 = new Man('李四', 25);
m1.names.push(100);
console.log(m2.names); // []
从上面的代码可以看到，子类共调用了父类两次。
第一次调用是子类的原型对象指向父类实例时
Man.prototype = new Person()
第二次调用时子类实例时，初始化了父类
const m1 = new Man('张三', 20);
// ....
Person.call(this, name);
借鉴寄生式继承方式，可以避免Man.prototype = new Person()这一次调用，封装一个函数，创建父类的副本，为副本添加构造函数，并将副本赋给子类的原型。如下：
function inheritPrototype(_sub, _super) {
var prototype = Object.create(_super.prototype); // 创建Super对象原型的副本
prototype.constructor = _sub; // 为创建的副本添加构造函数
_sub.prototype = prototype; // 将新创建的副本赋值给子类的原型
}
完整代码如下：
function Person(name) {
this.name = name;
}
Person.prototype.showName = function () {
console.log(this.name);
};
function Man (name, age) {
Person.call(this, name);
this.age = age;
}
function inheritPrototype(_sub, _super) {
var prototype = Object.create(_super.prototype); // 创建Super对象原型的副本
prototype.constructor = _sub; // 为创建的副本添加构造函数
_sub.prototype = prototype; // 将新创建的副本赋值给子类的原型
}
inheritPrototype(Man, Person);
const c1 = new Man('chicABoo', 35);
c1.showName(); // chicABoo
console.log(c1.age); // 35
console.log(c1 instanceof Man); // true
console.log(c1 instanceof Person); // true
借用高程上的话来说：
这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
