前言

在 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 可以进行宣告以及将物件给实体化。

今天就先介绍到的，明天让我们继续努力罗！