一、認識class定義類

我們會發現，按照前面的構造函數形式創建 類，不僅僅和編寫普通的函數過于相似，而且代碼并不容易理解。

• 在ES6（ECMAScript2015）新的標準中使用了class關鍵字來直接定義類；
• 但是類本質上依然是前面所講的構造函數、原型鏈的語法糖而已；
• 所以學好了前面的構造函數、原型鏈更有利于我們理解類的概念和繼承關系；

那么，如何使用class來定義一個類呢？

• 可以使用兩種方式來聲明類：類聲明和類表達式；
  

二、類和構造函數的異同

我們來研究一下類的一些特性：

• 你會發現它和我們的構造函數的特性其實是一致的；
  

三、類的構造函數

如果我們希望在創建對象的時候給類傳遞一些參數，這個時候應該如何做呢？

• 每個類都可以有一個自己的構造函數（方法），這個方法的名稱是固定的constructor；
• 當我們通過new操作符，操作一個類的時候會調用這個類的構造函數constructor；
• 每個類只能有一個構造函數，如果包含多個構造函數，那么會拋出異常；

當我們通過new關鍵字操作類的時候，會調用這個constructor函數，并且執行如下操作：

在內存中創建一個新的對象（空對象）；

這個對象內部的[[prototype]]屬性會被賦值為該類的prototype屬性；

構造函數內部的this，會指向創建出來的新對象；

執行構造函數的內部代碼（函數體代碼）；

如果構造函數沒有返回非空對象，則返回創建出來的新對象；

四、類的實例方法

在上面我們定義的屬性都是直接放到了this上，也就意味著它是放到了創建出來的新對象中：

• 在前面我們說過對于實例的方法，我們是希望放到原型上的，這樣可以被多個實例來共享：

• 但是在類中，我們可以直接在類中定義；
  

五、類的訪問器方法

我們之前講對象的屬性描述符時有講過對象可以添加setter和getter函數的，那么類也是可以的：

六、類的靜態方法

靜態方法通常用于定義直接使用類來執行的方法，不需要有類的實例，使用static關鍵字來定義：

七、ES6類的繼承 - extends

前面我們花了很大的篇幅討論了在ES5中實現繼承的方案，雖然最終實現了相對滿意的繼承機制，但是過程卻依然是非常繁瑣的。

• 在ES6中新增了使用extends關鍵字，可以方便的幫助我們實現繼承

八、super關鍵字

我們會發現在上面的代碼中我使用了一個super關鍵字，這個super關鍵字有不同的使用方式：

• 注意：在子（派生）類的構造函數中使用this或者返回默認對象之前，必須先通過super調用父類的構造函數！
• super的使用位置有三個：子類的構造函數、實例方法、靜態方法；

super在子類的構造函數使用：

super在實例方法中使用

super在靜態方法中使用

原型繼承關系圖：

子類對父類方法的重寫：

九、繼承內置類

我們也可以讓我們的類繼承自內置類，比如Array：

十、類的混入mixin

JavaScript的類只支持單繼承：也就是只能有一個父類

• 那么在開發中我們我們需要在一個類中添加更多相似的功能時，應該如何來做呢？
• 這個時候我們可以使用混入（mixin）；
  

在react中的高階組件

十一、JavaScript中的多態

面向對象的三大特性：封裝、繼承、多態。

• 前面兩個我們都已經詳細解析過了，接下來我們討論一下JavaScript的多態。

JavaScript有多態嗎？

• 維基百科對多態的定義：多態（英語：polymorphism）指為不同數據類型的實體提供統一的接口，或使用一個單一的符號來表示多個不同的類型。
• 非常的抽象，個人的總結：不同的數據類型進行同一個操作，表現出不同的行為，就是多態的體現。

那么從上面的定義來看，JavaScript是一定存在多態的

總結

以上是生活随笔為你收集整理的JS面向对象——class定义类、类的构造函数、实例方法、访问器方法、静态方法、继承、super、多态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。