29 混入兼顧值和類(lèi)型的合并操作-慕課專(zhuān)欄_W

1、零基礎(chǔ)學(xué)透 TypeScript / 4-4 混入，兼顧值和類(lèi)型的合并操作 混入，兼顧值和類(lèi)型的合并操作更新時(shí)間：2019-07-15 09:58:47 耐心是一切聰明才智的基礎(chǔ)。 柏拉圖 混入即把兩個(gè)對(duì)象或者類(lèi)的內(nèi)容，混合起來(lái)，從而實(shí)現(xiàn)一些功能的復(fù)用。如果你使用過(guò) Vue，你應(yīng)該知道 Vue 的mixins 這個(gè) api，它可以允許你將一些 到對(duì)象的屬性、方法混入到一些組件。接下來(lái)我們先來(lái)看看個(gè)在JavaScript 中實(shí)現(xiàn)的簡(jiǎn)單混入： class A constructor() funcA() console.log(here);class B constructor() funcB()

2、const mixin = (target, from) = / 這里定義一個(gè)函數(shù)來(lái)將一個(gè)類(lèi)混入到目標(biāo)類(lèi) Object.getOwnPropertyNames(from).forEach(key = / 通過(guò)Object.getOwnPropertyNames可以獲取一個(gè)對(duì)象自身定義的而非繼承來(lái)的屬性名組成的數(shù)組 targetkey = fromkey; / 將源類(lèi)原型對(duì)象上的屬性拿來(lái)添加到目標(biāo)類(lèi)的原型對(duì)象上 );mixin(B.prototype, A.prototype); / 傳入兩個(gè)類(lèi)的原型對(duì)象 const b = new B(); b.funcA(); / here我們通過(guò)Objec

3、t.getOwnPropertyNames 方法獲取一個(gè)對(duì)象自身的屬性，這里自身指除去繼承的屬性，獲取到屬性后將屬性賦值給目標(biāo)對(duì)象。 這是 JavaScript 中的簡(jiǎn)單混入，在 TypeScript 中我們知道，除了值還有類(lèi)型的概念，所以簡(jiǎn)單地將屬性賦值到目標(biāo)元素是不行的，還要處理類(lèi)型定義，我們來(lái)看下 TypeScript 中混入的例子： class ClassAa isA: boolean; funcA() class ClassBb isB: boolean; funcB() / 定義一個(gè)類(lèi)類(lèi)型接口AB，我們?cè)谥v類(lèi)的時(shí)候補(bǔ)充過(guò)類(lèi)和接口之間的繼承，也講過(guò)類(lèi)類(lèi)型接口 / 這里是讓類(lèi)AB繼承C

4、lassAa和ClassBb的類(lèi)型，所以使用implements關(guān)鍵字，而不是用extends class AB implements ClassAa, ClassBb constructor() isA: boolean = false; / 定義兩個(gè)實(shí)例屬性 isB: boolean = false;funcA: () = void; / 定義兩個(gè)方法，并指定類(lèi)型 funcB: () = void;function mixins(base: any, from: any) / 這里我們改造一下，直接傳入類(lèi)，而非其原型對(duì)象，base是我們最后要匯總而成的類(lèi)，from是個(gè)數(shù)組，是我們要混入的源

5、類(lèi)組成的數(shù)組 from.forEach(fromItem = Object.getOwnPropertyNames(fromItotype).forEach(key = totypekey = fromItotypekey;););mixins(AB, ClassAa, ClassBb); const ab = new AB(); console.log(ab);/*isA: false, isB: false, proto : funcA: f ()funcB: f () constructor: f來(lái)看下這個(gè)例子。這個(gè)例子中我們定義了兩個(gè)類(lèi) A

6、和 B，它們分別有自己的方法和實(shí)力屬性。如果我們想使用它們的所有屬性和方法來(lái)創(chuàng)建實(shí)例，就需要將它們做一個(gè)混合。因?yàn)榘?lèi)型定義，所以我們首先要定義一個(gè)接口，來(lái) 包含著兩個(gè)類(lèi)中元素類(lèi)型的定義。所以我們定義一個(gè)類(lèi)類(lèi)型接口，然后讓這個(gè)類(lèi)類(lèi)型接口 AB 通過(guò) implements 繼承 A 和 B 這兩個(gè)類(lèi)，這樣類(lèi) AB 就會(huì)同時(shí)擁有類(lèi) A 和 B 的類(lèi)型定義，還有自身定義的一些類(lèi)型和值。所以此時(shí)類(lèi)AB 相當(dāng)于： class AB isA: boolean = false; isB: boolean = false; funcA: () = void; funcB: () = void;然后我們通過(guò) mixins 函數(shù)將類(lèi) A 和類(lèi) B 的原型對(duì)象的屬性方法賦值給類(lèi) AB，因?yàn)轭?lèi) AB 有 funcA 和 funcB 的類(lèi)型定義，所以可以把 funcA 和 funcB 函數(shù)實(shí)體賦值給類(lèi) AB。 本節(jié)小結(jié)本小節(jié)我們學(xué)習(xí)了在TypeScript中如何實(shí)現(xiàn)混入，來(lái)復(fù)用現(xiàn)有邏輯。我們還同時(shí)復(fù)習(xí)了類(lèi)類(lèi)型接口和接口繼承類(lèi)的知識(shí)，可以去2.10小節(jié)復(fù)習(xí)一下，大家可以多看下本小節(jié)的例子，來(lái)深入理解類(lèi)和接口的混合使用。 下個(gè)小節(jié)我們將學(xué)習(xí)Promise以及它的語(yǔ)法糖async/await語(yǔ)法，通過(guò)它們我們可以實(shí)現(xiàn)同步操作，過(guò)去我們需要保證代碼執(zhí)行順序的邏輯，一般