快捷導(dǎo)航

TypeScript中的混合(Mixin)示例詳解

更新時(shí)間：2023年09月19日 08:58:01 作者：coder__wang

由于TypeScrip中的類不支持多繼承，所以引入了混合（Mixin）的特性，可以間接實(shí)現(xiàn)多繼承的效果，這篇文章主要介紹了一文弄懂TypeScript中的混合（Mixin）,需要的朋友可以參考下

1.前言

由于TypeScrip中的類不支持多繼承，所以引入了混合（Mixin）的特性，可以間接實(shí)現(xiàn)多繼承的效果。

2.正文

// 聲明一個(gè)汽車類Vehicle，它有drive方法
class Vehicle {
  drive(): void {
    console.log('駕駛')
  }
}
// 聲明轎車類Car，它有work方法
class Car extends Vehicle{
  work(): void {
    console.log('上班代步')
  }
}
// 聲明越野車類Suv，它有cross方法
class Suv extends Vehicle{
  cross(): void {
    console.log('山地越野')
  }
}
// 聲明跨界車類Crossover, 繼承Car和Suv,既可以上班代步，也可以山地越野
class Crossover extends Car, Suv{ // 這里ts報(bào)錯(cuò)：Classes can only extend a single class. 子類只能繼承一個(gè)父類
}

以上示例為了實(shí)現(xiàn)讓Crossover類同時(shí)擁有work和cross方法，我們嘗試一個(gè)類同時(shí)繼承多個(gè)類，ts報(bào)錯(cuò)了，下面利用Mixin的特性，來實(shí)現(xiàn)這一功能：

class Vehicle {
    drive(): void {
      console.log('駕駛')
    }
  }
  // 聲明轎車類Car，它有work方法
  class Car extends Vehicle{
    work(): void {
      console.log('上班代步')
    }
    getSpace(): void {
        console.log('small');
    }
  }
  // 聲明越野車類Suv，它有cross方法
  class Suv extends Vehicle{
    cross(): void {
      console.log('山地越野')
    }
    getSpace(): void {
        console.log('big');
    }
  }
  // 聲明跨界車類Crossover, 繼承Car和Suv,既可以上班代步，也可以山地越野
  class Crossover extends Vehicle {
  }
  // 這里需要?jiǎng)?chuàng)建需要合并類（Crossover）的同名接口，并繼承多個(gè)類Car、Suv
  interface Crossover extends Car, Suv {}
  applyMixins(Crossover, [Car, Suv])
  let crossover = new Crossover()
  // 該混合函數(shù)摘自TypeScript官方手冊，如果derivedCtor和constructors類中存在同名方法，則后者覆蓋前者
  function applyMixins(derivedCtor: any, constructors: any[]) {
    constructors.forEach((baseCtor) => {
      Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
        Object.defineProperty(
          derivedCtor.prototype,
          name,
          Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
          Object.create(null)
        );
      });
    });
  }
  crossover.drive() // 駕駛
  crossover.work() // 上班代步
  crossover.cross() // 山地越野
  crossover.getSpace() // big，同名方法getSpace是Suv中的，applyMixins函數(shù)傳入的第二個(gè)參數(shù)數(shù)組最后一個(gè)類是Suv

以上Crossover類通過Mixin實(shí)現(xiàn)繼承Car和Suv中的方法，并且也繼承了第二級(jí)類Vehicle中的方法，需要注意的是，對于同名的方法，會(huì)存在方法覆蓋的問題。

3.拓展

利用Mixin的思想還能做一些有趣的事兒！

interface AnimalConfig {
    type: string
    name: string
    voice: string
}
class AnimalSpeak {
    speak(config: AnimalConfig): void {
        const {type, name, voice} = config
        console.log(`${type + name}的叫聲是${voice}~`);
    }
    dogSpeak(name: string): void {
        console.log(`小狗${name}的叫聲是汪汪~`);
    }
    catSpeak(name: string): void {
        console.log(`小貓${name}的叫聲是喵喵~`);
    }
}
function extend<T, U>(to: T, from: U) {
    for (const key in from) {
        ;(to as T & U)[key] = from[key] as any
    }
    return to as T & U
}
const context = new AnimalSpeak()
const instance = AnimalSpeak.prototype.speak.bind(context)
extend(instance, context)
instance({type: '小貓', name: '咪咪', voice: '喵喵'}) // 小貓咪咪的叫聲是喵喵~
instance.dogSpeak('哮天犬') // 小狗哮天犬的叫聲是汪汪~

以上示例中context是AnimalSpeak類的實(shí)例對象，instance是一個(gè)方法，利用extend方法，將context對象中的屬性方法賦值給instance，這樣instance既可以當(dāng)做方法使用，也可以當(dāng)做對象調(diào)用其中的方法，非常靈活！

到此這篇關(guān)于一文弄懂TypeScript中的混合（Mixin）的文章就介紹到這了,更多相關(guān)TypeScript中的混合內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: