類別 Class

在去年的鐵人賽中，我利用類別Class做了一個都市女生存記的遊戲。
第一次自己生類別，覺得這樣的工廠模式真的很方便。
過了一年，再來深入了解一下類別。

Class類別可以定義一個物件(Object)抽象的屬性和方法，

Class是ES6以後才有的，其實大部分的功能ES5都做得到(使用prototype)

只是這樣寫更漂亮，更偏向物件導向。

明天再來整理一下使用Class實現物件導向基本特性和用法。
今天先來看一下基本用法。

環遊非洲第03天：Q

世界上第4大說英文人口的國家?(包含以英文為第二母語國家)
A. 英國
B. 澳洲
C. 印度
D. 奈及利亞

Class基本用法

回頭看一下自己的Code並且來改寫一下，和看一下Class基本性質。

以下是我在遊戲裡面都市女生存記的遊戲。

製造障礙物的class：

class Obstacle {
   //以new 生成實例時，會自動呼叫
   //this會指向實例
  constructor (x, y, w, h, t) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.t = t; //type = 文字和顏色
  }
  
  Update () {
    this.x += -gameSpeed; //敵人的位置, gamespeed會在start時候宣告
    this.Draw();
  }

  Draw () {
    ctx.beginPath();
    ctx.fillStyle = this.t.color;
    ctx.fillRect(this.x, this.y, this.w, this.h);
    ctx.fillStyle = '#ffffff';
    ctx.fillText(this.t.text, this.x + 40, this.y+ 20); //寫上文字
    ctx.closePath();
  }
}

// 上述等同於
Obstacle.prototype = {
  Update(){},
  Draw(){}
};

//constructor()裡面的寫法也可以改成
//寫法比較一目了然
class Obstacle {
    x = '';
    y = '';
    
  constructor (x, y, w, h, t) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.t = t; //type = 文字和顏色
  }
  ...
}

//使用時，用建構式生成新物件
let newObstacles = new Obstacle

//可以使用Object.assign一次新增多個方法
Object.assign(Obstacle.prototype, {
  destroyThatShit(){},
  makeHerCry(){}
});

//不能使用列舉，要使用getOwnPropertyNames
Object.keys(Obstacle.prototype)
// []
Object.getOwnPropertyNames(Obstacle.prototype)
//['constructor', 'Update']

//這個好玩
//類的屬性名可使用表達式
let methodName = "getArea";
class Obstacle{
  constructor() {
    // ...
  }

  [methodName]() {
    // ...
  }
}

//x 在constructor中this返回指向實例
newObstacles.hasOwnProperty('x') // true

//但是Update被綁在類別上(Obstacle)，所以__proto__指回class才為true
newObstacles.hasOwnProperty('Update') // false
newObstacles.__proto__.hasOwnProperty('Update') // true

//用原型添加function
newObstacles.__proto__.sayHi = function () { return 'Hi' };
newObstacles.sayHi();
//>>Hi

環遊非洲第03天：A

世界上第4大說英文人口的國家?
你猜對了嗎？是D.奈及利亞！
第一名當然是美國啦，第二名是印度，第三名是巴基斯坦
而作為非洲人口第一大國的奈及利亞(2億)，曾被英國殖民，英語又為官方語言，
居然超過英國(人口6000萬)成為世界第4大說英語的國家！
不過當地人第一母語大部分是他們的族語，如Yoruba，所以英語雖然會說，
不一定很流利，或是有口音。(不過還是比不會說的我強啦！)
因為最近碰到很多奈及利亞的工程師，他們離歐洲又近，被很多歐洲公司雇用
相信大家以後在國外工作，會有越來越高的可能性碰到來自奈及利亞的工程師喔！

引用參考

ES6 入門：Class的基本語法