前言

在 ES6 中新增了 Class(類別)，可以視為建構函式的語法糖，究竟是裹上怎樣的糖衣呢？讓我們今天來好好的了解一下。

基本概念

Class 的寫法很類似物件導向語言繼承的概念，可以想像我們使用 Class 製作一個模具，再利用這個模具來生產新的物件。

類別宣告

類別是由 建構函式、屬性和 方法 組成的，如下:

class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  getPersonalDetail(): string {
    return `我是 ${this.name} 今年 ${this.age} 歲`
  }
}

const newPerson = new Person('cy', 28)
console.log(newPerson.getPersonalDetail()) //我是 cy 今年 28 歲

首先我們使用 class 來建立一個 Person 的模具，接下來我們使用這個模具來建立新的物件。

class Person {
  ...
}

而產出的物件我們希望可以客製化名稱和年齡，所以我們會在製作新物件時會一併告訴這個模具名字和年齡。

目的：

const newPerson = new Person('cy', 28)

因此我們需要建構函式和初始的屬性

class Person {
  // 初始化屬性
  name: string
  age: number

  // 建構函式
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

為了要驗證這個建立的新物件，是不是有按照我們需求。

const newPerson = new Person('cy', 28)
console.log(newPerson.getPersonalDetail()) //我是 cy 今年 28 歲

因此我們要新增一個驗證身份的方法 getPersonalDetail()

class Person {
  // 初始化屬性
  name: string
  age: number

  // 建構函式
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  
  // 驗證身份方法
  getPersonalDetail(): string {
    return `我是 ${this.name} 今年 ${this.age} 歲`
  }
}

溫馨小提醒

其實三種元素都不是必須的，看我們的需求如何，如下：

class CallRuby {
  getRuby(){
    return 'Ruby'
  }
}

const printRuby = new CallRuby
console.log(printRuby.getRuby()) // Ruby

不過 屬性 是一定要透過 建構函式 來建立的。

Extends(擴展/繼承)

我們剛剛上面有提到如何用 class 來建立新的物件，接下來談論繼承這件事。
先來個比喻，我們都是人，但是我們會根據不同國家的人，而母語不同，但是我們都是人類。於是我們要繼承人類類別，來創立不同國家的人，例如： Taiwanese 人，母語：中文。

class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }

  getPersonalDetail(): string {
    return `我是 ${this.name} 今年 ${this.age} 歲`
  }
}

// 使用 extends 來進行繼承
class Taiwanese extends Person {
  language: string;

  constructor(name: string, age: number, language: string) {
    super(name, age) // 記得要使用 super 來去執行父層的 constructor
    this.language = language
  }
  
  getPersonalDetail(): string {
    return `${super.getPersonalDetail()} 語言: ${this.language}`
  }
}

const cy = new Taiwanese('cy', 28, 'Chinese')
console.log(cy.getPersonalDetail()) // 我是 cy 今年 28 歲 語言: Chinese

結語

class 如果有學習過物件導向程式語言，應該會很快理解，如果是沒有的人可能會多花一點時間，
其實仔細一看，跟昨天的 interface 好像有點相似，都是以物件的形式呈現，但兩者很大的不同在於 class 可以進行宣告以及將物件給實體化。

今天就先介紹到的，明天讓我們繼續努力囉！