相關概念

接下來專有名詞會盡量用英文，我覺得比較好辨別和認識 晶晶體?

應用

定義屬性和方法: ES6

// 1. 定義一個 Class
class Animal {
  // 2. 使用 constructor 定義建構函式
  constructor(name) {
    this.name = name;
  }
  // 3. 定義方法
  sayHi() {
    return `My name is ${this.name}`;
  }
}
// 4. 宣告變數 a 的 Class 為 Animal。
//    透過 new 產生新實例的時候，會自動呼叫建構函式。
//    (Object 就是 Class 的實例)。
let a = new Animal('Jack');

定義屬性和方法: ES7

class Animal {
  // 定義屬性
  // ES6 與 ES7 差異在於: 屬性可以直接在 class 裡面定義。
  // ES6 則是還須透過 constructor() 的 this.____ 來定義。
  name = 'Jack';
  constructor() {
    // ...
  }
}
let a = new Animal();
console.log(a.name); // Jack

OOP 三大特性: 封裝(Encapsulation)、繼承(Inheritance)、多型(Polymorphism)

1. 封裝(Encapsulation)
   將 Object 內部的細節資料、邏輯隱藏起來，只能透過它本身所提供的 Interface 取得內部屬性或方法。

   // 產生新實例之後我們使用 sayHi() 來取得一個字串並印出，
   // 無須知道其內部是如何組成 data 的。
   let a = new Animal('Jack');
   console.log(a.sayHi()); // My name is Jack
   

2. 繼承(Inheritance)
   子類別比原本的類別(稱為父類別)要更加具體化，也就是說子類別繼承了父類別。
   extends 實現繼承
   super 在子類別要呼叫父類別的建構函式和方法時使用

   // 1. Class Cat 繼承 Class Animal 
   class Cat extends Animal {
     constructor(name) {
       // 2. 呼叫父類別的 constructor(name)
       super(name);
       console.log(this.name);
     }
     sayHi() {
       // 3. 呼叫父類別的 sayHi()
       return 'Meow, ' + super.sayHi(); 
     }
   }
   
   // 4. 透過 new 產生新實例的時候，會自動呼叫建構函式。所以印出 Tom
   let c = new Cat('Tom'); // Tom
   console.log(c.sayHi()); // Meow, My name is Tom
   

3. 多型(Polymorphism)
   多個相同名稱的方法，傳入不同的參數，會執行不同的敘述。
   1. 多載(Overloading)
      同個 Class 中名稱相同，不過參數個數、或參數型態不同。
      利用參數個數或者參數型態，呼叫到對應的方法。

      // 範例是計算面積的方法
      // 傳入一個參數，就當正方形來算面積。
      // 傳入兩個參數，就當成長方形來算面積。
      class Tmp {
        // 定義方法1: 正方形
        public int computeArea(int length){
          return length * length;
        }
        // 定義方法2: 長方形
        public int computeArea(int length, int width){
          return length * width;
        }
      }
      let b = new Tmp();
      console.log(b.computeArea(3));    // 9
      console.log(b.computeArea(3, 5)); // 15
      

   2. 複寫(Overriding)
      覆寫掉父類別中的函式。

      // 1. Class Bird 繼承 Class Animal 
      class Bird extends Animal {
        // 2. 覆蓋父類別的 sayHi() 方法
        protected override sayHi() {
          return 'zzzZZZ' 
        }
      }
      let b = new Bird();
      console.log(b.sayHi()); // zzzZZZ
      

存取器(get&set)

Day24-TypeScipt: 存取器get&set

其實內容好像也沒多到額外搬出來
而且應該先介紹 Class 這些東西才對==我再改改 有空的話...

靜態方法

static 修飾符來實現靜態方法。
不需要實例化，而是直接透過 Class 來呼叫。

class Animal {
  // 1. 建立靜態方法
  static isAnimal(a) {
    // 2. instanceof 是 javascript 內建的方法，是用來對變數型別做判斷。
    //    而 instanceof 是用來判斷 A 是否為 B 的實例，比較的是原型(prototype)。
    return a instanceof Animal;
  }
}

let a = new Animal('Jack');
// 3. 透過 Class 呼叫。
Animal.isAnimal(a); // true
// 4. 透過變數呼叫。
//    系統報錯: 並非一個方法。
a.isAnimal(a);      // TypeError: a.isAnimal is not a function

靜態屬性: ES7

class Animal {
  // 使用 static 定義一個靜態屬性
  static num = 42;
  constructor() {
    // ...
  }
}

console.log(Animal.num); // 42

參考來源

類別 - TypeScript 新手指南
類別與介面 - TypeScript 新手指南
物件導向(Object Oriented Programming)概念
JS基本觀念：typeof vs instanceof