【JavaScript】子クラスが同名メソッドを持つ場合に親クラスのメソッドを呼び出す方法

JavaScriptでは、継承関係にある親クラスと子クラスが同じ名前・同じシグネチャ（引数の構成）のメソッドを持っていることがあります。この場合、子クラスのメソッドが親クラスのメソッドを上書き（オーバーライド）してしまうため、通常の方法では親側のメソッドをそのまま呼び出せません。

そんなときに役立つのが、prototypeプロパティとcall()メソッドを組み合わせたテクニックです。この構文を使えば、子クラスのインスタンスからでも親クラスのメソッドを明示的に実行できます。

基本構文

親クラスのメソッドを呼び出すには、以下のような構文を使用します。

console.log(親クラス名.prototype.メソッド名.call(子クラスのインスタンス));

call()に子クラスのインスタンスを渡すことで、親クラスのメソッド内のthisがそのインスタンスを指すようになり、意図した通りに処理が実行されます。

サンプルコード

class Super {
   constructor(value) {
      this.value = value;
   }
   display() {
      return `The Parent class value is= ${this.value}`;
   }
}
class Child extends Super {
   constructor(value1, value2) {
      super(value1);
      this.value2 = value2;
   }
   display() {
      return `${super.display()}, The Child Class value2 is=${this.value2}`;
   }
}
var childObject = new Child(10, 20);
console.log("Calling the parent method display()=")
console.log(Super.prototype.display.call(childObject));
console.log("Calling the child method display()=");
console.log(childObject.display());

この例では、Superクラスと、それを継承したChildクラスの両方にdisplay()メソッドが定義されています。ポイントは次の2つです。

• クラス内部から呼び出す場合： super.display()のようにsuperキーワードを使うだけで、親クラスのメソッドを呼び出せます。
• クラス外部から呼び出す場合： Super.prototype.display.call(childObject)のように、prototype経由でメソッドにアクセスし、call()で対象インスタンスを渡します。

プログラムの実行方法

上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js

ここでは、ファイル名をdemo192.jsとしています。

実行結果

このプログラムを実行すると、以下の出力が得られます。

PS C:\Users\Amit\javascript-code> node demo192.js
Calling the parent method display()= The Parent class value is= 10
Calling the child method display()= The Parent class value is= 10, The Child Class value2 is=20

出力を見ると、Super.prototype.display.call(childObject)によって親クラスのdisplay()だけが実行されている一方、childObject.display()では親の結果に子クラス独自の情報が連結されて表示されていることが確認できます。このように、prototypeとcall()を組み合わせることで、オーバーライドされた親メソッドにも柔軟にアクセスできるのです。