物件導向 (Object Oriented)

• Java
• Python
• JS也有，但沒有那麼嚴謹

所有東西都是物品

class Caculator {
  private name: string;
 
  constructor(name: string) {
    this.name = name;
  }
 
  public add(a: number, b: number): number {
      return a + b;
  }
  public sub(a: number, b: number): number {
      return a - b;
  }
  public mul(a: number, b: number): number {
      return a * b;
  }
  public div(a: number, b: number): number {
      return a / b;
  }    
}

所有東西都是物品

import Caculator from './Caculator';
 
const caculator = new Caculator('example');
 
console.log(caculator.add(1, 2));
console.log(caculator.sub(1, 2));
console.log(caculator.mul(1, 2));
console.log(caculator.div(1, 2));

• 類別: 只會有一個

class ....

• 物件: 可以有很多個

const caculator = new Caculator('example');
const caculator2 = new Caculator('mycaculator');

建構子

constructor(name: string) {
    this.name = name;
}

this

要使用class內部的方法、取得class內部的變數要使用this

OOP的三大特性

• 封裝
• 繼承
• 多形

封裝

不用知道別人的class怎麼寫的就可以直接使用

繼承

可以繼承別的class的內容，並新增自己需要的功能上去

class ScientificCaculator extends Caculator {
    constructor(name: string) {
        super(name);
    }
    ...
}

多形

同一個方法在不同子類別裡面，可以有不同的實作方法

getter & setter

用以改變屬性的讀取和賦值行為

class Caculator {
  private name: string;
 
  constructor(name: string) {
    this.name = name;
  }
 
  ...
 
  get Name(): string {
    return this.name;
  }
 
  set Name(name: string) {
    this.name = name;
  }
}

修飾符

• public
  • 任何人都可以存取，預設值
• protected
  • 只有同一個家族的可以存取
• private
  • 只有自己可以存取

• readonly
  • 只能讀不能寫，可以和其他的一起寫

抽象 Abstract

• 抽象的方法
• 抽象的類別

抽象的方法

class Caculator {
  private name: string;
 
  constructor(name: string) {
    this.name = name;
  }
 
  public abstract add(a: number, b: number): number {
      return a + b;
  }
  public abstract sub(a: number, b: number): number {
      return a - b;
  }
  public abstract mul(a: number, b: number): number {
      return a * b;
  }
  public abstract div(a: number, b: number): number {
      return a / b;
  }    
}

Caculator.add(1 + 2)

抽象的類別

• 抽象類別不能被實例化
• 子類別要自己寫抽象方法

absract class Caculator {
  private name: string;
 
  constructor(name: string) {
    this.name = name;
  }
 
  public abstract add(a: number, b: number);
  public abstract sub(a: number, b: number);
  public abstract mul(a: number, b: number);
  public abstract div(a: number, b: number);
}

一些參考資料

TSHandbook 中文版
ES6入門-Classes