29 混入兼顧值和類型的合并操作-慕課專欄_W

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

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

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

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

5、類組成的數(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來看下這個例子。這個例子中我們定義了兩個類 A

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