JavaScriptの親クラスと子クラスに同じ名前のメソッドを定義できる？メソッドオーバーライドの基本を解説

はい、JavaScriptでは親クラスと子クラスに同じ名前のメソッドを定義できます。

子クラスで親クラスと同名のメソッドを定義すると、子クラス側のメソッドが優先的に呼び出されます。この仕組みは「メソッドオーバーライド」と呼ばれ、オブジェクト指向プログラミングにおける重要な概念のひとつです。

コード例

以下の例では、親クラス「Parent」と子クラス「Child」の両方に、同じ名前のメソッド「showValues()」を定義しています。

class Parent {
    constructor(parentValue) {
        this.parentValue = parentValue;
    }
    // 親クラスのメソッド（子クラスと同じ名前）
    showValues() {
        console.log("親クラスのメソッドが呼ばれました.....");
        console.log("値は=" + this.parentValue);
    }
}
class Child extends Parent {
    constructor(parentValue, childValue) {
        super(parentValue);
        this.childValue = childValue;
    }
    // 子クラスのメソッド（親クラスと同じ名前）
    showValues() {
        console.log("子クラスのメソッドが呼ばれました.....");
        console.log("値は=" + `${this.childValue}`);
    }
}
var parentObject = new Parent(100);
parentObject.showValues();
var childObject = new Child(400, 500);
childObject.showValues();

プログラムの実行方法

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

node fileName.js

ここでは、ファイル名を「demo195.js」として保存したものとします。

実行結果

実行すると、以下のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo195.js
親クラスのメソッドが呼ばれました.....
値は=100
子クラスのメソッドが呼ばれました.....
値は=500

解説

実行結果からわかるように、親クラスのインスタンスで「showValues()」を呼び出すと親クラスのメソッドが、子クラスのインスタンスで呼び出すと子クラスのメソッドが実行されます。つまり、オブジェクトが属するクラスのメソッドが優先されるのです。

なお、子クラスのメソッド内から親クラスの同名メソッドを呼び出したい場合は、「super.showValues()」と記述することで実現できます。これにより、親クラスの処理を再利用しながら、子クラス独自の処理を追加することが可能です。