前言

對于一個前端開發者來說，很少用到 class ，因為在 JavaScript 中更多的是 函數式 編程，抬手就是一個 function，幾乎不見 class 或 new 的蹤影。所以 設計模式 也是大多數前端開發者的一個短板。

最近在學習 Angular 的過程中發現其大量的運用了 class，不得不佩服，Angular 確實是一個優秀的、值得深入研究的 框架。

本文將簡單的介紹一下 JavaScript 和 TypeScript 中的 class。

基本概念

在介紹 class 之前，要先介紹一些基本的概念。

1、靜態成員

類自身的成員，可以繼承，但實例無法訪問，一般多見于工具類，比如在jQuery時代最常見的 $.ajax ，ajax 便是 $ 的靜態方法，使用方便，不需要再通過 new 或者函數調用的得到一個新實例。

2、私有成員

類內部的成員，一般是不能繼承的，只能在內部使用，實例無法訪問，有一點點像閉包內部的變量，但是還是一定的差別，目前 JavaScript 無法直接定義私有成員，只能通過其它方式輔助實現。

3、getter/setter

存取器屬性，當我們訪問或者修改一個實例的屬性的時候，我們可通過存取器屬性攔截這兩個操作，從而做一些其它的事情，vue正是通過這個api來實現對數據變化的追蹤。

4、實例成員

指 new 出來的實例所具有的成員，可以被繼承，也是通過這個特性實現了代碼的復用。

5、抽象類，抽象方法

抽象類指不可以被實例化的類，通過 new 關鍵字調用會報錯，一般都被設計成父類。

抽象方法，只提供方法的名稱，參數和返回值，不負責實現，具體的實現由子類去完成，如果一個子類繼承于抽象類，那么這個子類必須實現父類所有的抽象方法，否則會報錯。

這兩個概念在 JavaScript 都無法直接實現，但在 TypeScript 或 其它面向對象語言中可以輕松實現，另外這個特性也是用于實現 多態 的重要手段。

案例介紹

為了更好的介紹 class，本文將采用三個 類 來做例子，分別是 Person、Chinese、American。從字面上可以很快的知道： Person 是 父類(基類) ，Chinese 和 American 是 子類(派生類) 。

Person 有 name、age、gender 三個屬性，sayHello 方法和 fullName 存取器屬性。同時 Person 還有一些 靜態成員 和 私有成員 ，由于實在太難想例子了，所以就用 foo、bar、x、y、z 這些來代替吧。

作為子類的 Chinese 和 American 繼承了 Person 的實例成員和靜態成員。同時它們自身也有一些自己的方法和屬性:

Chinese 有 kungfu 屬性，會習武 martial。

American 有 twitter，還可以 sendTwitter。

接下來我們就分別使用 JavaScript 和 TypeScript 來實現這個案例。

JavaScript 中的 class

JavaScript 中的 class 要分開說，在 ES6 中提供了兩個關鍵字 class 和 extends ，雖然它們只是語法糖，底層還是再利用 prototype 實現繼承的，但是不能否認，這中寫法確實讓代碼更清晰，更易讀。