53.5-JS高阶类

每一次选择都必须是一次超越，否则就不要选择；每一次放弃都必须是一次升华，否则就不要放弃。做人最大的乐趣在于通过奋斗去实现理想，所以选择放弃意味着我们还要更加完美，有缺点意味着我们还要更加努力。放弃是一种智慧，缺陷是一种恩惠。因为有新的目标去奋斗，人生才会更精彩，生活才会更充实！

总结：

1. 如果有继承，一定要有super()；
2. 做后端的很多一开始 都是写前端的，核心的后端一开始是不会让你写的；

1. 高阶对象、高阶类、或称Mixin模式

Mixin模式，混合模式。这是一种不用继承就可以复用的技术。主要还是为了解决多重继承的问题。多继承的继承路径是个问题。
JS是基于对象的，类和对象都是对象模板；
混合mixin，指的是将一个对象的全部或 部分拷贝拷贝到另一个对象上，其实就是属性了；
可以将多个类或对象混合成一个类或者对象；

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); // 构造子类对象时，调用父类构造器执行也会失败

父类构造函数中，要求具有属性是stringify的序列化函数，如果没有则抛出异常。
以下是完整继承的代码

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) /*构造器*/ {
        super()
        console.log('Point ~~~~~~~~~~~~~~~')
        this.x = x;
        this.y = y;
    }
    stringify() /*方法*/ {     //父类
        console.log(this, this.x, this.y,'++++++++');
    }
}
let p1 = new Point(10, 11)
p1.stringify()

// 多继承
class Point3D extends Point {
    constructor(x, y, z) {
        console.log('Point3D ~~~~~~~~~~~~~~~~')
        super(x, y); // 调用父类；
        this.z = z;
    }
    stringify(){console.log(this.x,this.y,this.z)}
}

let p2 = new Point3D(20, 21, 22);
p2.stringify()
#--------------------------------------------------------
Serialization constructor~~~
Point ~~~~~~~~~~~~~~~
Point { x: 10, y: 11 } 10 11 '++++++++'
Point3D ~~~~~~~~~~~~~~~~
Serialization constructor~~~
Point ~~~~~~~~~~~~~~~
20 21 22

2. 高阶对象实现

将类的继承构建成箭头函数。

// 普通的继承
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优先级太高了，所有后面要加括号才能先调用
#-------------------------------------------------------------------------------------------------------------
[Function: A]
[Function: A1]
100
[Function: B]
B constructor
B {}
[Function: A]
C constructor
A {}
C constructor

可以改造上面序列化的例子了

# Serialization =   右边是一个整体；
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());
#-------------------------------------------------------
Serialization constructor~~~
Point Constructor~~~~
<Point3D 70.80.>

注意：
Serialization(Point)这一步实际上是一个匿名函数调用，返回了一个新的类型，Point3D继承自这个新的匿名类型，增强了功能；

React框架大量使用了这种Mixin技术。