Typescript mixin混入

Mixin面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类

  1. 避免类层次结构的复杂性:直接继承会创建类层次结构,可能导致类之间的层次关系变得复杂。而混入允许在不创建类层次结构的情况下,将功能添加到现有的类中,从而避免了类层次结构的复杂性。
  2. 灵活的功能组合:通过混入,可以将多个功能组合到一个类中,实现更灵活的功能组合。可以选择性地将所需的混入应用到不同的类中,以满足特定的需求,而不是通过单一的继承关系来限制功能的组合。
  3. 减少代码重复:混入可以实现代码的重用,避免在多个类中重复编写相同的功能代码。可以将常见的功能封装到混入中,并在需要时应用到不同的类中,从而减少代码的重复性。
  4. 解耦和单一职责原则:混入使得功能的定义与类的实现解耦,每个混入可以专注于实现一个特定的功能。这有助于遵循单一职责原则,使代码更加清晰和可维护。

类的混入

利用混入实现js的多重继承

// 定义两个父类
class NormalPeople {
    normalId: string = 'np123'
    live(): string {
        return 'i just live on the earth'
    }
}
class SuperPeople {
    superId: string = 'sp123'
    rescue(): string {
        return 'i can rescue people'
    }
}
// 定义继承子类()

----属性一定要赋值,不然tsc编译之后会直接去掉这个属性

class Person implements NormalPeople, SuperPeople {
    // 把类class当成接口interface实现implement
    // 类Person只是实现Normal/SuperPeople,只是占位,具体实现在mixin中
    normalId: string = 'np123' //赋值
    superId: string = 'sp123'
    live: () => string
    rescue: () => string
}
// mixins
mixins(Person, [NormalPeople, SuperPeople])
/* 
    这个术语中的 "Ctor" 是 "Constructor" 的缩写
    "derivedCtor" 指派生类(子类)的构造函数。
    "baseCtor" 指基类(父类)的构造函数。
*/
function mixins(derivedCtor: any, baseCtors: any[]) {
    // 第一层遍历的父类
    baseCtors.forEach(baseCtor => {
        // 拿到父类上的构造函数和方法名
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            // 父类的构造函数和方法赋值给 要mixin的类
            derivedCtor.prototype[name] = baseCtor.prototype[name]
        })
    })
}
mixin实现多重继承弊端:
  1. 只能在继承树上继承一级的方法和属性。因为编译过后,在 JavaScript 中,父类的方法是在父类的原型对象中,子类的原型对象上找不到父类的方法
  2. 如果两个或更多的父类包含了同名的方法,那么只会继承传入 Mixins 函数中 baseCtor 数组中最后一个类中的该方法。

对象的混入

Object.assign()

interface Name {
    name: string
}
interface Age {
    age: number
}
interface Sex{
    sex: boolean
}

let a: Name = {
    name : 'levyy'
}
let b: Age = {
    age: 21
}
let c: Sex = {
    sex: true
}

let obj = Object.assign(a, b, c)
生成一个交叉&类型的对象
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值