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

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

JS继承专栏 

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

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

3【JS继承】JS继承之原型链继承

4【JS继承】JS继承之构造函数继承

5【JS继承】JS继承之组合继承

6【JS继承】JS继承之原型式继承

7【JS继承】JS继承之寄生式继承

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

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()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值