前回は、JavaScript でコンストラクター関数を使ってみました。

今回は、コンストラクター関数を使って、得点の加点・減点をやってみます。

まず、Perticipantコンストラクターを作成します。

Perticipantコンストラクターの中には、名前とスコアが入るようにします。

const Participant = function (name, score) {
  this.name = name;
  this.score = score;
};

tanakasuzukiを呼び出してみましょう。

const tanaka = new Participant("田中", 0);
const suzuki = new Participant("鈴木", 0);

console.log()で確認すると、

image2

コンストラクターがうまく機能しています。

では、どちらかが勝った場合は得点が加点され、負けた場合は得点が減点されるようにしてみます。

プロトタイプの継承をするために、prototypeを使います。

Participant.prototype.win = function () {
  this.score += 10;
  console.log(`${this.name}さんの勝ちです!現在の得点:${this.score}点`);
};

Participant.prototype.lose = function () {
  this.score -= 10;
  console.log(`${this.name}さんの負けです。現在の得点:${this.score}点`);
};

勝った場合を呼び出してみましょう。

tanaka.win();
suzuki.win();

image3

田中さん、鈴木さんどちらにも点数が入りました。

では、さらに田中さんが勝ったとします。

tanaka.win();
suzuki.win();
tanaka.win();

image4

勝利の回数だけ、得点されました。

では、負けた場合はどうなるでしょうか。

tanaka.win();
suzuki.win();
tanaka.win();
tanaka.lose();

image5

田中さんの得点が減点されました。

さらに続けてみます。

tanaka.win();
suzuki.win();
tanaka.win();
tanaka.lose();
tanaka.win();
tanaka.win();
suzuki.win();

image6

プロトタイプが、うまく機能しています。

また、ES6 のクラス構文では、以下のように記述します。

class Participant {
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }

  win() {
    this.score += 10;
    console.log(`${this.name}さんの勝ちです!現在の得点:${this.score}点`);
  }

  lose() {
    this.score -= 10;
    console.log(`${this.name}さんの負けです。現在の得点:${this.score}点`);
  }
}

const tanaka = new Participant("田中", 0);
const suzuki = new Participant("鈴木", 0);

image7

はじめと同じ結果になりました。

ブログ一覧