【JS继承】JS继承之寄生组合式继承

自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。

JS继承专栏

1【JS继承】什么是JS继承？

2【JS继承】常见的7种继承方式

9【JS继承】JS继承之ES6 Class继承

寄生组合式继承

定义：所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

一、定义父类型

function Person(name){
    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

总结：寄生组合式继承的高效体现在它只调用了一次Person构造函数，并且因此避免了在Pan.prototype上面创建不必要的、多余属性。与此同时，原型链还能保持不变；因此，还能正常使用instanceof和isPropertyOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

【JS继承】JS继承之寄生组合式继承

悦读