JavaScript或ES6如何实现多继承总结【Mixin混合继承模式】

参考别人案例:https://www.cnblogs.com/wwwweb/p/9228973.html

 

总结一句话:所谓的多继承或Mixin混合模式继承就是让继承的类成为一个变量即可【可以根据不同的需求继承不同的类】

注:Mixin混合模式是一种思想【可以把任何一个类都变成Mixin模式的可继承【变量类】的类】

 

JavaScript创建类的两种方式总结:


创建类的第一种方式
class Mixin1 {
    constructor () {
        console.log("这是一个Mixin类")
    }
}


创建类的第二种方式
const Mixin2 = class  {
    constructor () {
        console.log("这是一个Mixin类")
    }
}

两种创建类的方式等价的【和函数的原理一致】
new Mixin2()
new Mixin2()

Mixin混合模式完美实现多继承:

// 共同的特性
class Base {
    constructor () {
        console.log("Base");
    }
}

// 鱼类的特性【创建一个鱼类并继承Base】
const FishMixin = (superClass) => class extends superClass {
    constructor () {
        super();
        console.log("FishMixin");
    }
};

// 狗的特性【创建一个狗类并继承Base】
const DogMixin = (superClass) => class extends superClass {
    constructor () {
        super();
        console.log("DogMixin");
    }
};

// FishMixin 和 DogMixin 是没有任何继承关系的,如何Test都继承,就是多继承了
class Test extends DogMixin(FishMixin(Base)) {

}

真正多继承的原理是什么?【最终需要的效果】

这种继承等价于【但是这种继承是不合理的,因为DogMixin不能直接去继承FishMixin】
所以为了达成这种继承效果, 而不影响继承的原理,Mixin混合模式就是非常明智的选择!
class FishMixin  extends Base {

}

class DogMixin extends FishMixin{

}

class Test extends DogMixin{

}

Mixin混合多继承实战总结【非常重要】

// 创建类的第一种方式
class Base {
    constructor () {
        console.log("这是一个Base类");
    }
}


// 创建类的第二种方式
const Mixin = (SuperClass = null) => {
    既然使用了extends继承,SuperClass必须是一个类,否则会报错!
    如果不传入SuperClass,那么继承Mixin必须是Mixin()【是一个类方法】
    SuperClass = SuperClass || class Empty {
    };

    return class extends SuperClass {
        constructor () {
            super();
            console.log("这是一个Mixin2类");
        }
    }
};

【非常重要】这里的Mixin2是一个方法类,所以不传继承类参数的话也必须是Mixin2()
class Test1 extends Mixin() {
    constructor () {
        super();
        console.log("这是一个Test类");
    }
}

class Test2 extends Mixin(Base) {
    constructor () {
        super();
        console.log("这是一个Test类");
    }
}

new Test2();
new Test1();


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值