腾讯网qq网站,linux网站入口,乐清网红,优化网站技术TypeScript 混入(Mixins)
混入#xff08;Mixins#xff09;是面向对象编程中的一个比较重要的概念。本节将会通过一个实例逐步介绍混入是如何在 TypeScript 中使用的。 1. 解释
在 TypeScript 中#xff0c;可以根据不同的功能定义多个可复用的类#xff0c;它们将作为 …TypeScript 混入(Mixins)
混入Mixins是面向对象编程中的一个比较重要的概念。本节将会通过一个实例逐步介绍混入是如何在 TypeScript 中使用的。 1. 解释
在 TypeScript 中可以根据不同的功能定义多个可复用的类它们将作为 mixins。因为 extends 只支持继承一个父类我们可以通过 implements 来连接多个 mixins并且使用原型链连接子类的方法和父类的方法。
这就像组件拼合一样由一堆细粒度的 mixins 快速搭建起一个功能强大的类。 2. 简单的对象混入
先来看一个基础例子
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 对象原有的属性值。 3. TypeScript Mixins
先介绍一个前置知识 Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名包括不可枚举属性但不包括Symbol值作为名称的属性组成的数组。 3.1 代码演示
下面的代码演示了如何在 TypeScript 中使用混入
// Disposable Mixin
class Disposable {isDisposed!: booleandispose() {this.isDisposed true}
}// Activatable Mixin
class Activatable {isActive!: boolean;activate() {this.isActive true}deactivate() {this.isActive false}
}class SmartObject{constructor() {setInterval(() console.log(this.isActive : this.isDisposed), 500)}interact() {this.activate()}// DisposableisDisposed: boolean falsedispose!: () void// ActivatableisActive: boolean falseactivate!: () voiddeactivate!: () void
}
applyMixins(SmartObject, [Disposable, Activatable])let smartObj new SmartObject()
setTimeout(() smartObj.interact(), 2000)function applyMixins(derivedCtor: any, baseCtors: any[]) {baseCtors.forEach(baseCtor {Object.getOwnPropertyNames(baseCtor.prototype).forEach(name {derivedCtor.prototype[name] baseCtor.prototype[name]})})
}3.2 逐步解析这个例子
代码里首先定义了两个类它们将做为 mixins。可以看到每个类都只定义了一个特定的行为或功能。稍后我们使用它们来创建一个新类同时具有这两种功能。
// Disposable Mixin
class Disposable {isDisposed!: booleandispose() {this.isDisposed true}
}// Activatable Mixin
class Activatable {isActive!: booleanactivate() {this.isActive true}deactivate() {this.isActive false}
}下面使用 implements 连接多个父类需要在子类里实现所有接口定义。
class SmartObject implements Disposable, Activatable {}这么做是为将要 mixin 进来的属性/方法创建出占位属性。这告诉编译器这些成员在运行时是可用的这样就能使用 mixin 带来的便利虽说需要提前定义一些占位属性。 // DisposableisDisposed: boolean falsedispose!: () void// ActivatableisActive: boolean falseactivate!: () voiddeactivate!: () void子类对外暴露一个封装后的 public 方法方法的具体实现可以借助混入的 mixins 类中的属性/方法: interact() {this.activate()}最后把 mixins 混入定义的类完成全部实现部分。
applyMixins(SmartObject, [Disposable, Activatable])applyMixins() 方法借助 Object.getOwnPropertyNames() 遍历 mixins 上的所有属性并复制到目标上去把之前的占位属性替换成真正的实现代码。
function applyMixins(derivedCtor: any, baseCtors: any[]) {baseCtors.forEach(baseCtor {Object.getOwnPropertyNames(baseCtor.prototype).forEach(name {derivedCtor.prototype[name] baseCtor.prototype[name]})})
}applyMixins() 这个工具函数可以封装在项目中一个核心函数库中。 4. 小结
混入这种思想在一些开源项目如 material、vue-class-component 中被广泛使用我们日常工作中也可以根据需求借鉴使用。
