JavaScript　基底クラスのメソッドをオーバーライドで上書きする方法

JavaScriptで基底クラスのメソッドをオーバーライドで上書きする方法について詳しく解説します。

基底クラスのメソッドを上書きするにはどうしたらいいですか？

基底クラスのメソッドを上書きするにはオーバーライドを利用します。

サブクラスからスーパークラスのメソッドを呼び出す方法

　サブクラスからスーパークラスのメソッドを呼び出すには、superキーワードを使用します。このsuperキーワードは、親クラスのメソッドを呼び出すためのものです。

例えば、以下のようなクラスがあります。

class Animal {
  move() {
    console.log("動きます");
  }
}

class Dog extends Animal {
  move() {
    console.log("走ります");
  }
}

　ここで、DogクラスはAnimalクラスを継承しています。また、Dogクラスはmoveメソッドをオーバーライドしています。

オーバーライドの実装方法

　サブクラスからスーパークラスのメソッドを上書きするための機能を「オーバーライド」と呼びます。

オーバーライドは、サブクラスに同じ名前のメソッドを定義することで実現します。

例えば、以下のようなクラスがあります。

class Animal {
  move() {
    console.log("動きます");
  }
}

　ここで、Animalクラスにはmoveメソッドが定義されています。このmoveメソッドを、以下のようなサブクラスで上書きすることができます。

class Dog extends Animal {
  move() {
    console.log("走ります");
  }
}

　ここで、DogクラスはAnimalクラスを継承しています。また、Dogクラスにはmoveメソッドが定義されています。このmoveメソッドは、Animalクラスのmoveメソッドを上書きすることで、独自の処理を定義することができます。

このとき、DogクラスからAnimalクラスのmoveメソッドを呼び出すには、以下のようにします。

class Dog extends Animal {
  move() {
    super.move();
    console.log("走ります");
  }
}

このように、super.move()と記述することで、Animalクラスのmoveメソッドが呼び出されます。

オーバーライドは上書きといいつつも、基底クラスの機能を完全に書き換えることは稀で、上記のように基底クラスの機能を流用しつつ、差分の機能を追加するような使い方が一般的です。

以上が、JavaScriptでオーバーライドの実装方法についての解説です。

プロパティのオーバーライドについて

　JavaScriptにおいては、プロパティは直接的にはオーバーライドすることはできません。

　代わりに、サブクラスで新たなプロパティを定義することで同名のプロパティを上書きすることはできますが、継承元のプロパティを書き換えることはできません。また、継承元のプロパティを直接参照することもできます。

以下は、サブクラスで新たなプロパティを定義することで継承元のプロパティを上書きするサンプルコードです。

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

class Dog extends Animal {
  constructor(name) {
    super(name, "dog");
  }
}

const dog = new Dog("Pochi");
console.log(dog.name); // Pochi
console.log(dog.type); // dog

　このサンプルでは、Animalクラスにnameとtypeという2つのプロパティが定義されています。次に、DogクラスがAnimalクラスを継承し、新たにnameプロパティを定義しています。

これにより、Dogクラスのインスタンスからtypeプロパティを参照することもできます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。