【教材】JavaScriptの教材を作ってみました3 〜クラス構文〜

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

半人前のくせに、偉そうに教材を作ってみました。

学べる技術

• クラス構文
• 継承
• コンストラクタ
• インスタンス化

問題１

Humanクラスをインスタンス化してhumanインスタンスを作成し、
コンソールにTaroと出力するようメソッドを呼び出してください。

class Human {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

回答例

let human = new Human("Taro"); 
//インスタンス作成時に引数で渡した値がコンストラクタの引数となります。
human.sayName();

//Taro

問題２

{
  let name = "Taro";
  console.log(`Mr.${name}`);
}

{
  let name = "Ken";
  console.log(`Mr.${name}`);
}
//Taro
//Ken

類似する二つの処理をクラスにまとめて下さい。
同じ結果になるように、作成したクラスをインスタンス化してください。

回答例

class CallName {
  constructor(name) {
    console.log(`Mr.${name}`);
  }
}

let callName1 = new CallName("Taro");
let callName2 = new CallName("Ken");

//コンストラクター関数に定義された処理は、インスタンス化されたと同時に実行されます。

問題3

class Human {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

Humanクラスを継承するBabyを作成し、Babyクラスからインスタンを作成しsayNameメソッドを呼び出した場合

//Ken
//Ongya

とコンソールに出力されるプログラムを作成してください。(kenの部分は親メソッドを利用してください）

回答例

class Baby extends Human {
//コンストラクタ関数を定義しない場合、スコープチェーンにより親のコンストラクタ関数が呼び出される。
  sayName() {
    super.sayName();
    console.log("Ongya");
  }
}

let baby = new Baby("Ken");
baby.sayName();

※回答例はあくまで一例です。あまり鵜呑みにしないでください。

参考:

[【JavaScript】クラス構文について １]
(https://qiita.com/sho_U/items/aaf31fad5394edb70861)
【JavaScript】クラス構文について 2 〜継承〜