TypeScript徹底解讀(26課時)_18.Mixins混入

本節的代碼在mixin.ts文件內

同時在index.ts內引入

混入就是把兩個對象或者類的內容混合到一塊兒，從而實現一些功能複用。

對象混入

js中對象的混入

先來看一個js中對象的混入的例子

首先定義一個對象a
在定義一個對象b
a裏面混入一個對象b讓a裏面有對象b的屬性
使用es6的Object.assign方法，a寫在前面，b寫在後面

a裏面就也有了b對象的屬性

b仍是隻有b屬性

ts中對象混入

在ts中，是具備類型系統的

AB如今就是一個交叉類型，這是ts自動幫你推斷出來的

固然你也能夠指定它的類型是ObjectA和ObjectB的交叉類型，交叉類型就表示它既包含A的特性，又包含B的特性。

類的混入

看下js中類的混入

定義類A和B，輸出類A和類B，分別有funcA和funcB

Object.getOwnPropertyNames()能夠獲取對象自身的屬性，除去他繼承來的屬性，
對它全部的屬性遍歷，它是一個數組，遍歷一下它全部的屬性名
 
base原型對象上，添加到遍歷的屬性

調用mixins2，把兩個原型對象傳進去
b.pertotype就是b的原型對象
a.pertotype就是a的原型對象
調用了mixins2這個方法，傳進去b的原型對象和a的原型對象

建立b的實例，並輸出這個b，發現裏面既有funcA也有funcB

調用b.funcA() 打印出了here

這就是js中對類的混入

ts中對類的混入

ts中還要處理對類型的定義
把兩個類當作接口來繼承，AB繼承classAa和ClassBb,繼承多個接口用逗號分隔開

繼承了兩個類之後，這裏要把兩個類裏面的全部屬性和方法都要在這裏定義一下

定義一個函數mixins，從from裏面forEach遍歷一下，由於傳入進來是一個數組，它是要混入的兩個類組成的數組，要遍歷它

經過Object.getOwnPropertyNames獲取當前遍歷的原型對象，獲取它原型對象上定義的全部屬性，返回的也是一個數組
也須要遍歷他

給base添加當前遍歷的這個原型對象上的屬性

調用混入的方法

建立classAB的實例，並輸出，輸出的funcA和funcB是有實際的函數體的

classAB這裏只須要定義函數的類型就能夠，實際的方法體是從ClassAa和ClassBb裏面繼承過來的

能夠看到下劃線proto下劃線這個下面有繼承來的兩個方法funcA和funcB


經過mixins函數，將這個ClassAa和ClassBb原型對象的屬性和方法賦給ClassAB
由於ClassAa和ClassBb有函數funcA和funcB的類型定義，因此能夠吧funcA和funcB的函數實體直接賦給ClassAB，這個就是ts中的混入