究竟啥是 Mixin 模式? --<Javascript 学习笔记 3>
Lemon1x 30 0

Javascript 学习笔记 3

如果你学过诸如 Python、C++ 等带有多重继承的面向对象语言,那么你绝对见过 Mixin,因为它就是多继承的一个别名,那为啥不叫多继承、非得起个奇怪的名字呢?因为说到底,JS还是一门单继承的面向对象语言,它不能像多继承语言那样优雅的多继承,所以 Mixin 和多继承只是结果一样,过程不太一样。

先看个单继承的例子:

class Base {
    constructor(name) {
        this.name = name;
    }
}

class Extend extends Base {
    show() {
        return this.name;
    }
}

console.log(new Extend('Elaina').show()); // Elaina

但这时候我已不满足于单单继承 Base,我又写了个几个对象:

const Sub1 = {
    on() {
        console.log(`${this.name} is ON!`);
    }
};

const Sub2 = {
    off() {
        console.log(`${this.name} is OFF!`);
    }
};

const Sub3 = {
    show() {
        console.log(`The name is ${this.name}`);
    }
};

没接触过 Mixin 的朋友可能就疑惑了,你为啥不用 Sub1....Sub3 继承一个一个继承呢?因为这就是 Mixin 的精髓了,随后我只需要干一件事,就能把 Base 就能同时拥有 Sub1...3 的方法:

Object.assign(
    Base.prototype,

    Sub1, Sub2, Sub3
);
const ins = new Base('Hello');
ins.on(); // Machine is ON!

当然肯定会有人奇怪,我为啥要把 Sub x 写成对象而不是类,这个是 Object.assign 的问题,它只会复制可枚举的内容,然而类的 prototype 不可枚举

评论区

索引目录