JS high order, high-order class, or called Mixin mode

Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )

High order, high-order class, or called Mixin mode

Mixin mode, mixed mode. This is an inheritance can not reuse technology. Mainly to solve the problem of multiple inheritance. Multiple inheritance is a problem of inheritance path

JS is object-based, template classes and objects are objects

Mixing mixin, it refers to the whole or partial copies of an object to another object up. In fact, the attribute; a plurality of classes or objects may be mixed into a class or object

Inherit the implementation of

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

class Point extends Serialization {
    constructor(x,y){
        console.log('Point Constructor~~~~');
        super(); // 调用父构造器
        this.x = x;
        this.y = y;
    }
}

//s = new Serialization(); // 构造Serialization失败
//p = new Point(4,5); // 构造子类对象时，调用父类构造器执行也会失败

Parent class constructor, properties are required to have a function stringify serialization, if no exception is thrown

The following is the complete code inherited

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

class Point extends Serialization {
    constructor(x,y){
        console.log('Point Constructor~~~~');
        super(); // 调用父构造器
        this.x = x;
        this.y = y;
    }

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

class Point3D extends Point {
    constructor(x,y,z){
        super(x,y);
        this.z = z;
    }

    stringify () {
        return `<Point x=${this.x}, y=${this.y}, z=${this.z}>`
    }
}

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

High order to achieve

// 普通的继承
class A extends Object {};
console.log(A);

// 匿名类
const A1 = class {
    constructor(x) {
        this.x = x;
    }
}
console.log(A1);
console.log(new A1(100).x);

// 匿名继承
const B = class extends Object{
    constructor(){
        super();
        console.log('B constructor');
    }
};
console.log(B);
b = new B();
console.log(b);


// 箭头函数，参数是类，返回值也是类
// 把上例中的Object看成参数
const x = (Sup) => {
    return class extends Sup {
        constructor(){
            super();
            console.log('C constructor');
        }
    };
}
// 演化成下面的形式
const C = Sup => class extends Sup {
    constructor(){
        super();
        console.log('C constructor');
    }
};

//cls = new C(Object); // 不可以new，因为是一个普通函数，它的返回值是一个带constructor的类
cls = C(A); // 调用它返回一个类，一个带constructor的class
console.log(cls);
c = new cls();
console.log(c);

// 其它写法
c1 = new (C(Object))(); // new优先级太高了，所有后面要加括号才能先调用

The above sequence can be modified example of the

const Serialization = Sup => class extends Sup {
    constructor(...args) {
        console.log('Serialization constructor~~~');
            super(...args);
            if (typeof(this.stringify) !== 'function'){
                throw new ReferenceError('should define stringify.');
        }
    }
}

class Point {
    constructor(x,y){
        console.log('Point Constructor~~~~');
        this.x = x;
        this.y = y;
    }
}

class Point3D extends Serialization(Point) {
    constructor(x,y,z){
        super(x,y); // super是Serialization(Point)包装过的新类型
        this.z = z;
    }

    stringify () {
        return `<Point3D ${this.x}.${this.y}.>`;
    }
}

let p3d = new Point3D(70,80,90);
console.log(p3d.stringify());

Note:
Serialization (Point) This step is actually an anonymous arrow function call returns a new type, Point3D inherits from this new anonymous type, enhanced functionality

React Framework uses this technique Mixin