Day23 :【TypeScript 学起来】先了解 ES6 Class

因为我没什麽用到 Class，这一篇会笔记 ES6 Class 的使用，下一篇才会进到 TypeScript 中使用 class ，以及使用 class 来实现 interface。那我们先来了解 ES6 Class 吧～～
若有错误，欢迎留言指教，感恩的心。

Class是什麽？

简单来说就是物件的模板，定义了一件事物的抽象特点，包含它的属性和方法，提供一个更简洁的语法来建立物件和处理继承。

如何定义？

有两种方式可以定义 class： class declaration 及 class expressions。(跟定义fucntion很像)

1. Class Declaration

要使用关键字 class，搭配名称(如 "Point")，通常都是第一个字大写表示。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

2. Class Expressions

一样 class expressions 需使用 class 关键字，只是他可以有名称或是无名称。

// unnamed
let Point = class {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
};

// named
let Point = class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
};

一些 Class 要知道的事

constructor: 用来初始建构一个类别(class)的物件。一个class 只能有一个 constructor。
extends: 使用 extends 继承类别，建立子类别，子类别可以使用父层的东西。
super: 可以使用 super 於通过函式存取父层，super 关键字必须出现在this 关键字之前使用
prototype methods : 建立class的方法
getter : 使用关键字 get，用以改变属性的读取
setter : 使用关键字 set，用以改变属性的赋值
static method: 使用关键字 static 在 class 建立静态方法，在class中的其他方法都不能使用他，静态方法常被用来建立给应用程序使用的工具函数。

看例子比较快理解：

class Point {

  //建构初始物件
  constructor(x = 0, y = 0) { //预设给0
    this.x = x;
    this.y = y;
  }

  //prototype methods 
  printPoint() {
    console.log(`x: ${this.x}, y: ${this.y}`);
  }
  
  //getter
  get xValue() {
    return this.x;
  }

  //setter
  set xValue(z) {
    if (z < 0) {
      z = 0;
    }
    this.x = z;
  }
  
  //static method without this
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.sqrt(dx * dx + dy * dy);
  }
}

//用 new 来使用这个模板
let p = new Point(2, 4);
p.printPoint(); //x: 2, y: 4 

//getter 直接像属性一样访问
console.log(`get x value: ${p.xValue}`); //get x value: 2

//setter 直接用 = 来赋值即可
p.xValue = -5;
console.log(`set x value: ${p.xValue}`); // set x value: 0

//static
let p1 = new Point(10, 12);
let p2 = new Point(16, 18);
console.log(Point.distance(p1, p2)); //8.48528137423857

//用 extends 继承类别Point， 建立子类别addPoint
class AddPoint extends Point {
  constructor(x, y) {
    super(x, y); //用super呼叫父层的constructor（x,y）
    this.x = x;
    this.y = y;
  }
    
  add() {
    this.printPoint(); //因为已继承，可以直接使用父层的方法
    return `total = ${this.x + this.y}`; 
  }
}

let p3 = new AddPoint(5, 7);
console.log(p3.add()); //total = 12

笔记：

是可以不指定constructor的，如果不指定 constructor，就会就会使用预设的 constructor，长这样constructor() {}。
getter & setter 的好处就是，不会改变原本constructor的东西，也可以直接像使用 class 的属性一样去使用。
原本以为使用getter & setter很方便，不用特别建立method，使用上可以直接像属性一样使用，但刚好看到文章，说不建议使用 getter 和 setter，因为它可能会发生无预期的副作用，并且难以测试与维护；如果需要，使用原型方法（prototype method）自己建立，例如getVal() 和 setVal('Hello')。 airbnb JS Style Guide 有提到。因为我没有用过getter & setter，想知道有什麽副作用。
static method使用上有两种方式，一个是使用 this，另一个是不使用 this。如果使用this, 在呼叫时需搭配call来使用。参考这篇
物件（Object）：类别的实例，透过 new 产生。
面向物件（OOP）的三大特性：封装、继承、多型。
封装（Encapsulation）：将对资料的操作细节隐藏起来，只暴露对外的介面。外界呼叫端不需要（也不可能）知道细节，就能透过对外提供的介面来访问该物件，同时也保证了外界无法任意更改物件内部的资料。
继承（Inheritance）：子类别继承父类别，子类别除了拥有父类别的所有特性外，还有一些更具体的特性。
多型（Polymorphism）：由继承而产生了相关的不同的类别，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接呼叫 eat 方法，程序会自动判断出来应该如何执行 eat。
修饰符（Modifiers）：修饰符是一些关键字，用於限定成员或型别的性质。比如 public 表示公有属性或方法。
抽象类别（Abstract Class）：抽象类别是供其他类别继承的基底类别，抽象类别不允许被实例化。抽象类别中的抽象方法必须在子类别中被实现
介面（Interfaces）：不同类别之间公有的属性或方法，可以抽象成一个介面。介面可以被类别实现（implements）。一个类别只能继承自另一个类别，但是可以实现多个介面。