Mixin模式，混合模式钾虐。這是一種不用繼承就可以復(fù)用的技術(shù)噪窘。主要還是為了解決多重繼承的問題。多繼承的繼承路徑是個問題效扫。
JS是基于對象的效览，類和對象都是對象模板。

混合mixin荡短，指的是將一個對象的全部或者部分拷貝到另一個對象上去丐枉。其實(shí)就是屬性了。
可以將多個類或?qū)ο蠡旌铣梢粋€類或?qū)ο蟆?/p>

繼承實(shí)現(xiàn)

先看一個繼承實(shí)現(xiàn)的例子

class Serialization {
    constructor() {
        console.log("Serialization construtor ~~~~~~")
        if (typeof(this.stringfy) !== "function") {
            throw new ReferenceError("should define stringify.");
        }
    }
}

class Point extends Serialization {
    constructor(x, y) {
        console.log("Point Constructor");
        super(); // 調(diào)用父構(gòu)造器
        this.x = x;
        this.y = y;
    }

    stringfy() {
        return `<Point x="${this.x}, y=${this.y}">`;
    }
}


s = new Serialization(); // 構(gòu)造Serialization失敗
p = new Point(4,5); // 構(gòu)造子類對象時掘托，調(diào)用父類構(gòu)造器執(zhí)行也會失敗

父類構(gòu)造函數(shù)中瘦锹，要求具有屬性是stringify的序列化函數(shù)，如果沒有則拋出異常闪盔。

以下是完整繼承的代碼

class Serialization {
    constructor() {
        console.log("Serialization construtor ~~~~~~")
        if (typeof(this.stringfy) !== "function") {
            throw new ReferenceError("should define stringify.");
        }
    }
}

class Point extends Serialization {
    constructor(x, y) {
        console.log("Point Constructor");
        super(); // 調(diào)用父構(gòu)造器
        this.x = x;
        this.y = y;
    }

    stringfy() {
        return `<Point x="${this.x}, y=${this.y}">`;
    }
}

class Point3D extends Point {
    constructor(x, y, z) {
        super(x, y); // 調(diào)用父構(gòu)造器
        this.z = z;
    }

    stringfy() {
        return `<Point3D x="${this.x}, y=${this.y}, z=${this.z}">`
    }
}

p = new Point(4, 5);
console.log(p.stringfy());
console.log("=====================");
p3d = new Point3D(7, 8, 9);
console.log(p3d.stringfy());

/* 輸出結(jié)果
Point Constructor
Serialization construtor ~~~~~~
<Point x="4, y=5">
=====================
Point Constructor
Serialization construtor ~~~~~~
<Point3D x="7, y=8, z=9">
*/

高階對象實(shí)現(xiàn)

將類的繼承構(gòu)建成箭頭函數(shù)弯院。

const Serialization = Sup => class extends Sup{
    constructor(...args){
        console.log("Serialization constructor");
        super(...args);
        if (typeof this.stringfy !== "function"){
            throw ReferenceError("Stringfy is not define.");
        }
    }
};


class Point{
    constructor(x, y){
        console.log("Point sonctructor");
        this.x = x;
        this.y = y;
    }
}

class Point3D extends Serialization(Point){
    constructor(x, y, z){
        super(x, y);
        this.z = z;
    }
    stringfy(){
        console.log(`<Point ${this.x}.${this.y}.${this.z}>`)
    }
}

let p3d = new Point3D(3, 4, 5);
p3d.stringfy();

/* 輸出結(jié)果
Serialization constructor
Point sonctructor
<Point 3.4.5>
*/