混入Mixins
混入（Mixins）是面向对象编程中的一个比较重要的概念。
在 TypeScript 中，可以根据不同的功能定义多个可复用的类，它们将作为 mixins。因为 extends 只支持继承一个父类，我们可以通过 implements 来连接多个 mixins，并且使用原型链连接子类的方法和父类的方法。
这就像组件拼合一样，由一堆细粒度的 mixins 快速搭建起一个功能强大的类。
1. 简单的对象混入
mixin简单通俗的讲就是把一个对象的方法和属性拷贝到另一个对象上。
例如:
let target = { a: 1, b: 1 }
let source1 = { a: 2, c: 3 }
let source2 = { b: 2, d: 4 }
Object.assign(target, source1, source2)
console.log(target) // { a: 2, b: 2, c: 3, d: 4 }
通过 Object.assign() 将 source1 与 source2 混入到 target 上，并且替换了 target 对象原有的属性值。
2. 创建工厂函数混入
该模式依赖于使用具有类继承的泛型来扩展基类。TypeScript 最好的 mixin 支持是通过类表达式模式完成的。
通过创建工厂函数,为类混入其他成员信息
例如:
// 基类
class Base {
name = '';
age = 0;
constructor(name:string){
this.name = name
}
}
// Mixin工厂函数,它返回一个扩展基类的类表达式
type Constructor = new (...arg:any[]) => {}
function Scale<TBase extends Constructor>(Base:TBase){
// mixin 通过setters 和getters 新增了scale属性
// 定义了私有属性
return class Scaling extends Base{
// 属性
_scale= 1;
setScale(scale:number){
this._scale = scale
}
get scale():number{
return this._scale
}
}
}
// 创建一个类,该类代表应用`mixins`和基类
const Person = Scale(Base)
// 实例化
const student = new Person('Bird')
console.log('student', student)
/*
{
age: 0
name: "Bird"
_scale: 20
scale: 20
}
*/
// 设置_scale值
student.setScale(20)
// 获取_scale值
console.log(student.scale)
3. 拷贝基类属性方法混入
例如
// Disposable 混入类
class Disposable {
isDisposed!: boolean
dispose() {
this.isDisposed = true
}
}
// Activatable 混入类
class Activatable {
isActive!: boolean;
activate() {
this.isActive = true
}
deactivate() {
this.isActive = false
}
}
// 扩展类
class SmartObject implements Disposable,Activatable{
constructor() {
setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500)
}
interact() {
this.activate()
}
// 主要作用是告诉TypeScript 已经实现 这些属性和方法,不报错
// 具体的属性值和方法 ,通过拷贝的方式, 从基类中获取过来
// 实现Disposable 成员
isDisposed: boolean = false
dispose!: () => void
// 实现 Activatable成员
isActive: boolean = false
activate!: () => void
deactivate!: () => void
}
// 混入基类的属性和方法
function applyMixins(derivedCtor: any, baseCtors: any[]) {
baseCtors.forEach(baseCtor => {
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
derivedCtor.prototype[name] = baseCtor.prototype[name]
})
})
}
// 混入方法, 将基类中的属性方法,克隆到扩展类中
applyMixins(SmartObject, [Disposable, Activatable])
// 实例化扩展类
let smartObj = new SmartObject()
setTimeout(() => smartObj.interact(), 2000)
