第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

一飛同學(xué) · 更新于 2020-04-12

TypeScript 混入(Mixins)

混入（Mixins）是面向?qū)ο缶幊讨械囊粋€比較重要的概念。本節(jié)將會通過一個實例逐步介紹混入是如何在 TypeScript 中使用的。

1. 慕課解釋

在 TypeScript 中，可以根據(jù)不同的功能定義多個可復(fù)用的類，它們將作為 mixins。因為 extends 只支持繼承一個父類，我們可以通過 implements 來連接多個 mixins，并且使用原型鏈連接子類的方法和父類的方法。

這就像組件拼合一樣，由一堆細粒度的 mixins 快速搭建起一個功能強大的類。

2. 簡單的對象混入

先來看一個基礎(chǔ)例子：

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值作為名稱的屬性）組成的數(shù)組。

3.1 代碼演示

下面的代碼演示了如何在 TypeScript 中使用混入：

// Disposable Mixin
class Disposable {
  isDisposed!: boolean
  dispose() {
    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()
  }

  // Disposable
  isDisposed: boolean = false
  dispose!: () => void
  // Activatable
  isActive: boolean = false
  activate!: () => void
  deactivate!: () => 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?？梢钥吹矫總€類都只定義了一個特定的行為或功能。稍后我們使用它們來創(chuàng)建一個新類，同時具有這兩種功能。

// Disposable Mixin
class Disposable {
  isDisposed!: boolean
  dispose() {
    this.isDisposed = true
  }
}

// Activatable Mixin
class Activatable {
  isActive!: boolean
  activate() {
    this.isActive = true
  }
  deactivate() {
    this.isActive = false
  }
}

下面使用 implements 連接多個父類，需要在子類里實現(xiàn)所有接口定義。

class SmartObject implements Disposable, Activatable {}

這么做是為將要 mixin 進來的屬性/方法創(chuàng)建出占位屬性。這告訴編譯器這些成員在運行時是可用的，這樣就能使用 mixin 帶來的便利，雖說需要提前定義一些占位屬性。

  // Disposable
  isDisposed: boolean = false
  dispose!: () => void
  // Activatable
  isActive: boolean = false
  activate!: () => void
  deactivate!: () => void

子類對外暴露一個封裝后的 public 方法，方法的具體實現(xiàn)可以借助混入的 mixins 類中的屬性/方法:

  interact() {
    this.activate()
  }

最后，把 mixins 混入定義的類，完成全部實現(xiàn)部分。

applyMixins(SmartObject, [Disposable, Activatable])

applyMixins() 方法借助 Object.getOwnPropertyNames() 遍歷 mixins 上的所有屬性，并復(fù)制到目標上去，把之前的占位屬性替換成真正的實現(xiàn)代碼。

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

applyMixins() 這個工具函數(shù)可以封裝在項目中一個核心函數(shù)庫中。

4. 小結(jié)

混入這種思想在一些開源項目如 material、vue-class-component 中被廣泛使用，我們?nèi)粘９ぷ髦幸部梢愿鶕?jù)需求借鑒使用。