JavaScript クラス

#クラス

モノを生成するための設計図をクラスと言います。

class クラス名　　{

}で表します。クラス名は大文字で書かれることが好まれています。
そうすることで、インスタンスは小文字で書くことができ、
クラスとインスタンスで同じ単語を使っても被らなくなります。

#インスタンス

上記で設定したクラスからオブジェクトを生成します。
クラスから生成したオブジェクトをインスタンスと言います。

インスタンスの生成方法は
new クラス名();です。

#コンストラクタ

クラスの中にconstructor() {}と記述することで、
インスタンス生成時にコンストラクタの中身を出力することができます。

コンストラクタに中にthisを使うことでプロパティを生成することができます。
thisはインスタンスを表していると思って下さい。

また、インスタンス毎に値を変える時はconstructor()のカッコに
引数を定義して下さい。

class Animal {
  constructor(name, age) {
   this.name = name;
   this.age = age;
  }
}

const animal = new Animal("ジョン",8);
console.log(`名前: ${animal.name}`);
console.log(`年齢: ${animal.age}`);

#メソッド

メソッドはインスタンスの動作を表しています。
また、処理をまとめるとも表現します。

クラスの中でメソッド名() {}と表します。
メソッド内で変数を使う時はthisを使います。

メソッド内で他のメソッドを呼ぶ時もthisを使います。
this.メソッド名();

class Animal {
 constructor(name,age) {
  this.name = name;
  this.age = age;
  }

 greet() {
  console.log("こんにちは");
 }

 info() {
  this.greet();
  console.log(`名前は${this.name}です`);
  console.log(`${this.age}歳です`);
 }
}

const animal = new Animal("ジョン",8);
animal.info();

#継承

既にあるクラスをもとに、新しくクラスを作る時は継承を行います。
例えば上記のようにanimalクラスからdogクラスを作る時は
class Dog extends Animal {}を使います。
このようにclass 新しいクラス extends 元のクラスで継承を行います。
元のクラスを親クラス、新しいクラスを子クラスと呼びます。

継承すると全ての機能が使えるようになります。
なので、今回だとinfoメソッドなどが使えるようになります。

#オーバーライド

継承をした際にどちらのクラスにも同じメソッドがある場合、
どちらのメソッドが採用されるのでしょうか。

それは子クラスのメソッドが採用されます。
このことをオーバーライドと言います。

同様にコンストラクタもオーバーライドできます。
その時、同じ箇所はsuperを使って表します。

class Animal {
 constructor(name,age) {
  this.name = name;
  this.age = age;
  }

 greet() {
  console.log("こんにちは");
 }

 info() {
  this.greet();
  console.log(`名前は${this.name}です`);
  console.log(`${this.age}歳です`);
 }
}

class Dog extends Animal {
 constructor(name,age,breed) {
  super(name,age)
  this.breed = breed;
  }

 info() {
  console.log(`名前は${this.name}です`);
  console.log(`犬種は${this.breed}です`);
  console.log(`${this.age}歳です`);
  const humanAge = this.getHumanAge();
  console.log(`人間年齢で${humanAge}歳です`);
  }

  getHumanAge() {
    return this.age * 7;
  }
 }

const dog = new Dog("レオ", 4,"チワワ");
dog.info();

#最後に

初心者ですので、拙い文章や書き方だと思いますが、最後まで見て頂き
ありがとうございました。もし、ご指摘等がございましたらよろしくお願い致します。