ES2015入門系列10-類 classes

OK, 咱們繼續，此次來聊聊類。

內有 Jon Snow大戰異鬼, ?

熟悉後端的朋友們對類確定都不陌生，以下面一段PHP的代碼:

class Human
{

  protected $name;

  public function __construct($name)
  {
    $this->name = $name;
  }

  public function introduce()
  {
    echo '你好，我叫 ' . $this->name . PHP_EOL;
  }

}
$jack = new Human('Jack');
$jack->introduce();

上面的代碼，咱們建立了一個叫Human的類，初始化的時候傳入名字，還有一個自我介紹的方法。

一樣的功能到了JS的世界呢? 且看下面的代碼(ES5):

var Human = function(name) {
  this.name = name;
};

Human.prototype.introduce = function() {
  console.log('你好，我叫 ' + this.name);
};

var jack = new Human('Jack');
jack.introduce();

對了，你沒有看錯，在JS的世界中，咱們就是這麼來實現類的開發的, 總感受哪裏不舒服對吧?

到了ES2015(ES6), 事情就變得美好了，一塊兒來看看下面的代碼：

class Human {

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

  introduce() {
    console.log(`你好，我是 ${this.name}`);
  }

}

let jack = new Human('Jack');
jack.introduce();

終於變得正常一些了，淚奔。。。

你們請記住，這只是語法糖，在這背後的實現依然是咱們ES5中展現的代碼，可是，咱們用着爽就好，哈哈哈！！！

有了class關鍵字，理所固然就有extends嘍，立刻試試：

class Man extends Human {

  construtor(name) {
    super(name);
    this.gender = 'male';
  }

}

new Man('Jon').introduce();

繼續淚奔，寫法上不用爲了實現繼承，各類操做prototype了。

這裏還要特殊講一下靜態方法:

class Tree {

  static new() {
    return new Tree();
  }

}

let tree1 = new Tree(); // Tree Object
let tree2 = Tree.new(); // Tree Object
tree1.new(); // TypeError: tree1.new is not a function

能夠看到，靜態方法只能在類中調用，而不能被類實例調用。

爲了更好的體驗JS面向對象開發，下面咱們來實戰一下，來寫一個簡單的自動MUD遊戲，故事的場景是Jon Snow大戰異鬼，?。

• 主角Jon Snow將大戰若干回合的異鬼，並最終和Night King決戰！

• Jon Snow每戰勝一個異鬼將吞噬該異鬼的等級到本身身上

• Jon Snow有必殺攻擊

分析一下：

• 無論是Jon Snow, 異鬼和Night King, 對於遊戲來講都是角色，因此咱們應該有個角色基類。

  • 有名稱，等級，血量等基礎屬性

  • 有攻擊，升級，承受傷害等方法

• Jon Snow 應該繼承 角色基類，並擁有必殺攻擊的方法

• 須要有個遊戲世界, 有場景，並能夠控制遊戲開始。

OK，編寫代碼：

class Role { //角色基類

  constructor(name, level = 1, health = 100) {
      this.name = name;
      this.level = level;
      this.health = health;
  }

  isDead() { //判斷角色是否死亡
    return this.health <= 0;
  }

  levelUp(level = 1) { //升級
    this.level += level;
  }

  damage(power) { //受到傷害
    this.health = this.health - power;
  }

  attack(role) { //攻擊
    this.strike(role);
  }

  strike(role) { //普通攻擊
    let power = parseInt(Math.random() * 20 * this.level / 10);
    role.damage(power);
    console.log(`[${this.name}]攻擊了[${role.name}], 形成了[${power}]點傷害`);
  }

}

class Hero extends Role {

    attack(role) { //攻擊，有機率是用必殺攻擊
        if (! this.isCriticalStrike()) {
            return this.criticalStrike(role);
        }

        return this.strike(role);
    }

    criticalStrike(role) { //必殺攻擊
        let power = parseInt(200 * Math.random() + 50);
        role.damage(power);
        console.log(`[${this.name}]使用必殺攻擊了[${role.name}], 形成了[${power}]點傷害`);
    }

    isCriticalStrike() {
        return Math.random() > 0.70;
    }

}

class Monster extends Role {

}

class Game { //遊戲世界

  constructor() {
    this.name = "權利的遊戲";
    this.hero = new Hero('Jon Snow', 10); // 初始化英雄Jon Snow
    this.monsters = [ //怪物集合，模擬簡單的遊戲關卡。
      new Monster('異鬼 01', 1, 10),
      new Monster('異鬼 02', 3, 30),
      new Monster('異鬼 03', 5, 50),
      new Monster('異鬼 04', 10, 100),
      new Monster('異鬼 05', 15, 150),
      new Monster('異鬼 06', 20, 200),
      new Monster('Night King', 50, 500)
    ];
    this.level = 0; // 遊戲當前關卡記錄
    console.log(`你在[${this.name}]中扮演[${this.hero.name}], 征程即將開始...`);
  }

  play() { // 遊戲開始
    while (this.level < this.monsters.length && ! this.hero.isDead()) {
      let monster = this.monsters[this.level];
      console.log(`關卡[${this.level + 1}] 你遇到了[${monster.name}], 進入戰鬥:`);
      let offensive = this.hero;
      let defensive = monster;
      while (! this.hero.isDead() && ! monster.isDead()) {
        offensive.attack(defensive);
        let middleman = offensive;
        offensive = defensive;
        defensive = middleman;
      }
      if (this.hero.isDead()) {
        console.log(`你被[${monster.name}]戰勝了, 遊戲結束!`);
        break;
      }
      if (monster.isDead()) {
        console.log(`你戰勝了[${monster.name}] 等級提高:[${monster.level}]`);
        this.hero.levelUp(monster.level);
        this.level ++;
      }
    }
    if (this.level === this.monsters.length) {
        console.log(`恭喜你通關遊戲!`);
    }
  }

}

let game = new Game();
game.play();

執行一下，能夠獲得：

你在[權利的遊戲]中扮演[Jon Snow], 征程即將開始...
關卡[1] 你遇到了[異鬼 01], 進入戰鬥:
[Jon Snow]使用必殺攻擊了[異鬼 01], 形成了[114]點傷害
你戰勝了[異鬼 01] 等級提高:[1]
關卡[2] 你遇到了[異鬼 02], 進入戰鬥:
[Jon Snow]使用必殺攻擊了[異鬼 02], 形成了[140]點傷害
你戰勝了[異鬼 02] 等級提高:[3]
關卡[3] 你遇到了[異鬼 03], 進入戰鬥:
[Jon Snow]使用必殺攻擊了[異鬼 03], 形成了[69]點傷害
你戰勝了[異鬼 03] 等級提高:[5]
關卡[4] 你遇到了[異鬼 04], 進入戰鬥:
[Jon Snow]使用必殺攻擊了[異鬼 04], 形成了[169]點傷害
你戰勝了[異鬼 04] 等級提高:[10]
關卡[5] 你遇到了[異鬼 05], 進入戰鬥:
[Jon Snow]攻擊了[異鬼 05], 形成了[41]點傷害
[異鬼 05]攻擊了[Jon Snow], 形成了[19]點傷害
[Jon Snow]攻擊了[異鬼 05], 形成了[21]點傷害
[異鬼 05]攻擊了[Jon Snow], 形成了[3]點傷害
[Jon Snow]使用必殺攻擊了[異鬼 05], 形成了[223]點傷害
你戰勝了[異鬼 05] 等級提高:[15]
關卡[6] 你遇到了[異鬼 06], 進入戰鬥:
[Jon Snow]使用必殺攻擊了[異鬼 06], 形成了[77]點傷害
[異鬼 06]攻擊了[Jon Snow], 形成了[23]點傷害
[Jon Snow]使用必殺攻擊了[異鬼 06], 形成了[221]點傷害
你戰勝了[異鬼 06] 等級提高:[20]
關卡[7] 你遇到了[Night King], 進入戰鬥:
[Jon Snow]使用必殺攻擊了[Night King], 形成了[155]點傷害
[Night King]攻擊了[Jon Snow], 形成了[88]點傷害
你被[Night King]戰勝了, 遊戲結束!

你們能夠調調參數，虐一虐大Boss吧，哈哈哈~~~~