TypeScript实例讲解（十九）

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

接上一篇：TypeScript实例讲解（十八）

本篇内容：混入（Mixins）。

混入（Mixins）是面向对象编程中一个比较重要的概念，它的思想是把两个对象或者类的内容混合到一起，从而实现一些功能复用。

对象混入

// 例 1
let obj1 = {
    name: 'bare'
}
let obj2 = {
    age: 20
}
Object.assign(obj1, obj2)
console.log(obj1);   // {name: 'bare', age: 20}

Object.assign() 是 ES6 提供的方法，用于对象合并，将源对象的所有可枚举属性，复制到目标对象。该方法的第一个参数是目标对象，从第二个参数开始都是源对象。

// 例 2
let obj1 = {
    name: 'bare'
}
let obj2 = {
    name: 'panda',
    age: 20
}
Object.assign(obj1, obj2)
console.log(obj1);   // {name: 'panda', age: 20}

如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

类的混入

前面我们已经了解过 extends，extends 只能支持子类继承一个父类。在 TypeScript 中还可以通过 implements 来连接多个可复用的类。并且使用原型链连接子类的方法和父类的方法。

// 例 3
// Teacher Mixin
class Teacher {
    isTeacher: boolean;
    teach() {}
}

// Singer Mixin
class Singer {
    isSinger: boolean;
    sing() {}
}

例3定义了 Teacher 和 Singer 两个类，它们将做为 mixins。可以看到这两个类都只定义了一个特定的行为或功能。

// 例 4（接例3）
class MusicTeacher implements Teacher, Singer{
    isTeacher: boolean = true;
    isSinger: boolean = true;
    teach: () => void
    sing: () => void
}

例4创建一个新类并通过 implements 关键字连接多个父类，然后在子类实现了所有接口定义，为将要 mixin 进来的属性和方法创建出占位属性。

// 例 5
applyMixins(SmartObject, [Disposable, Activatable]);

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

例5把 mixins 混入定义的类，完成全部实现部分。
创建 applyMixins 函数的作用是使用 Object.getOwnPropertyNames() 遍历 mixins 上的所有属性，并复制到目标上，把之前的占位属性替换成真正的实现代码。

混入思想在日常业务开发中不是很常见，但是在 vue-class-component 等开源项目中应用广泛。

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。