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

骑猪看日落 2021-09-20 05:44 499阅读 0赞

参考别人案例：[https://www.cnblogs.com/wwwweb/p/9228973.html][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();

[https_www.cnblogs.com_wwwweb_p_9228973.html]: https://www.cnblogs.com/wwwweb/p/9228973.html