TypeScript徹底解讀(26課時)_8.ES6精講-ES6中的類(進階)

8.TypeScript徹底解讀-ES6精講-類(進階)

在index.ts內引入

Food建立的實例賦值給Vegetabled這個原型對象，這樣使用Vegetables建立實例的時候，就能繼承到Food實例的方法

建立西紅柿的實例，調用getType方法，獲取到的就是Food這個實例裏面的type的值就是food

在es6中類的繼承要比這個簡潔多了，es6中的類就是構造函數的一個語法糖

es6中類的繼承

類的繼承也是使用extends這個關鍵字

只有在調用super方法以後，你纔可使用this

name是父類裏面添加的屬性。age是子類裏面的屬性

再調用一下繼承父類的方法

這就是es6中類的繼承，只有在子類的構造函數中調用super之後 ，才能在子類裏面使用this

 

看一下c是否是child的實例，返回的是true

是不是parent的實例，也是true

因此繼承了父類的子類建立的實例，既是子類的實例也是父類的實例，子類會將父類的靜態方法也都繼承過來，至關於父類的靜態方法在子類中又定義了一遍

父類定義靜態方法getNames,子類調用這個方法，返回的是name。就是子類的類的名稱

Object.getPrototypeOf():獲取構造函數它的原型對象,如何獲取一個類的父類呢？就能夠經過這個方法

返回的結果是true，因此child的原型就是parent

super函數

 super能夠做爲函數使用，也能夠做爲對象來使用

做爲函數使用表明的是父類的constructor

es6中要求子類的構造函數必須調用super函數，只有調用了super函數才能在本身的構造函數內使用this。super只能在構造函數內調用

子類調用super之後，父類裏面的this添加的name屬性就會添加到子類裏面。例如這裏的Parent裏面的this.name屬性就添加到了子類裏面

 

做爲對象：

在普通方法中，它指向的是父類的原型對象

在靜態方法中，它指向的是父類

這裏的super指向的父類原型對象，而不是父類自己，因此這裏調用的是父類在自己上建立的方法getType就報錯。。

 

super在靜態方法中指向的就是父類自己。因此這裏咱們把方法改爲靜態的方法就能夠調用父類的getType方法了

 

 

super要麼做爲函數使用，要麼做爲做爲一個對象，調用它的屬性或者方法，必定不能只使用super不作任何的操做

類的protoType和_proto_屬性

_proto_不是es標準中定義的屬性，而是大多數瀏覽器廠商在es5 的實現中添加的，每個對象都有一個_proto_屬性，它指向對應的構造函數的protoType屬性

19分07秒

使用Object構造函數來建立一個對象實例，這就說明_proto_指向的是構造函數的protoType屬性

objs是構造函數Object建立的實例

在es6中使用_proto_和prototype屬性

子類的_proto_指向的是父類自己

子類的prototype屬性的_proto_指向的是父類的prototype屬性

實例的_proto_屬性的_proto_指向的父類實例的_proto_

原生構造函數的繼承

在es5中原生構造函數是無法繼承的，

原生構造函數包含如下：

Boolean

Number

String

Array

Date

Function

Error

Object

在es6中容許繼承原生構造函數

這裏使用解構操做符來接收任意個參數，同時使用super方法執行父類的構造函數

 

es6中數組有個方法fill，能夠給這個數組填充元素

以字符串加號填充三個位置

再試試array的join方法，拼接處了字符串

傳入多個參數，返回的就是多個參數組成的數組

 

總結：es5的構造函數和es6的類，這兩種形式實現繼承的機制上存在差別的，

es5構造函數是先建立子構造函數的實例this,而後再將父構造函數的方法屬性添加到這個this上

es6的類是先從父類取到實例對象this，而後在調用super函數以後，再將子類的屬性和方法加入到這個this上，這也就是爲何咱們要先調用這個super方法，而後你才能使用this的緣由