More than 1 year has passed since last update.

JavaScriptのクラスと継承、オーバーライド

Posted at 2022-03-08

クラスとは

クラスは設計図だとイメージしてください。

クラスとインスタンス

クラスという設計図を作って、
それを元に作られたのがインスタンスです。

例えば車を1台作ればそれを元にいろいろな車を作れますよね。
そういうイメージです。

クラスを１つ作ると、他のプロジェクトなどに流用できるみたいです。

クラスの定義のやり方

クラスを定義する時の定義のやり方です。

class ClassName {} //クラスの宣言
const instance = new ClassName();　//newでクラスのインスタンス作成

実際のコードをみていきます。

//基地のクラスを定義
class Base {}

const base = new Base();

⚫︎メソッドを定義
　クラスにメソッドを定義していきます。

class ClassName {
 methodName(){ //処理
}

const instance = new ClassName();
instance.methodName();

実際のコードをみていきます。

class Base {
  weapon() {　　//weaponメソッドを定義
    console.log('兵器');
  }
}
const base = new Base();
base.weapon();
//兵器が出力

constructor

constructorは初期化する処理のことです。(Rubyだとinitializer)
クラスの中で関数を呼ぶときに　thisを使います。

class ClassName {
 constructor(color){
 this.color = color;
}
}

実際のコードをみていきます。

class Car {
  constructor(color) {
    this.color = color;
  }
}
const car = new Car('white');
//ゲッター
console.log(car.color);
//whiteと出力
//セッター
car.color = 'red';
console.log(car.color);
//redと出力

クラスの継承とオーバーライドについて

クラスで作った設計図を元に、新たに定義してデータなどを上書きすることをオーバーライドと言います。
継承とオーバーライドのやり方を書いていきます。
クラスを継承するのにextendsを使います。

class User {
#メソッド定義
}
 class AdmnUser extends User {
 #メソッド等の定義
}

実際にコードを書いていきます。

class NormalCar {
  engine() {
    console.log('車のエンジンをかける');
  }
}

const car = new NormalCar();
car.engine();
//車のエンジンをかける   が出力

継承を使うと

class NormalCar {
  engine() {
    console.log('車のエンジンをかける');
  }
}

class SilverCar extends NormalCar {    //継承
  engine() {
    console.log('銀色の車のエンジンをかける');
  }
}

const car = new NormalCar();
car.engine();

const silvercar = new SilverCar();  //継承
silvercar.engine();

//車のエンジンをかける
// 銀色の車のエンジンをかける  //オーバーライドされた

こちらも参考にしてください。
https://qiita.com/Hashimoto-Noriaki/items/a9cec16753db70c52033

JavaScriptのクラスと継承、オーバーライド

クラスとは

クラスとインスタンス

クラスの定義のやり方

constructor

クラスの継承とオーバーライドについて

おすすめ動画