【JavaScript】クラスの継承

継承とは

クラスの継承は、あるクラスが別のクラスを拡張するための方法です。
つまり、既存の機能の上に、新たな機能を作ることができます。

継承前

ドラえもんクラス.js

class Doraemon {
    constructor() {
        this.name = 'ドラえもん';
    }

    walk() {
        alert(`${this.name}は歩く`);
    }
}


const doraemon = new Doraemon();
doraemon.walk(); // ドラえもんは歩く

ドラみクラス.js

class Dorami {
    constructor() {
        this.name = 'ドラみ';
    }

    walk() {
        alert(`${this.name}は歩く`);
        alert('気分が良くなる');
    }
}

const dorami = new Dorami();
dorami.walk(); // ドラみは歩く 気分が良くなる

継承していく

1. ロボットクラスを作成し、共通部分を抜き出す

ロボットクラス.js

class Robot {
    constructor() {
        this.name = 'ロボット';
    }

    walk() {
        alert(`${this.name}は歩く`);
    }
}

const robot = new Robot();
robot.walk(); //　ロボットは歩く

2. ロボットクラスを extends する

ドラえもんクラス.js

class Doraemon extends Robot {}

const doraemon = new Doraemon();
doraemon.walk(); // ロボットは歩く

extendsすることで、DoraemonクラスのオブジェクトはRobotクラスのメソッドが利用できるようになります。そのため、上記のようにDoraemonクラスが空でも親のwalk()メソッドを利用できます。

しかし、今のままではdoraemon.walk()を実行しても、「ロボットは歩く」と表示されてしまいます。

3. コンストラクタのオーバーライド

コンストラクタのthis.nameを「ドラえもん」に変更したい場合は、コンストラクタをオーバーライドします。

コンストラクタのオーバーライドをすることで、継承したクラスを初期化する時に子クラスに特化した処理を行うことできます。
superを使用して、親クラスの初期化処理を子クラスに継承させつつ、子クラス独自の初期化処理を追加します。

ドラえもんクラス.js

class Doraemon extends Robot {
    constructor() {
        super(); // 親クラスのコンストラクタを呼び出す
        this.name = 'ドラえもん'; // ドラえもん独自のプロパティ
    }
}

const doraemon = new Doraemon();
doraemon.walk(); // ドラえもんは歩く

これで「ドラえもんは歩く」と表示されるようになりました。

4. メソッドのオーバーライド

次に、ドラみクラスについてですが、ドラみは歩くと気分が良くなります。
そのため、walk()メソッドをオーバーライドする必要があります。

デフォルトでは親クラスからメソッドを取得しますが、子クラスで同名のメソッドを指定すると、子クラスのメソッドが呼び出されるようになります。

オーバーライドする際は、親メソッドを完全に置き換えるのではなく、拡張や微修正を加えることが望ましいとされています。
そのため、子メソッドに追加した処理の前後、または処理中に親メソッドを呼び出します。
親メソッドはsuper.method(...)で呼び出せます。

ドラみクラス.js

class Dorami extends Robot {
      constructor() {
        super();
        this.name = 'ドラみ';
    }
    
    feelBetter() {
        alert('気分が良くなる');
    }
    
    walk() {
        super.walk(); // Robotクラスのwalk()の呼び出し
        this.feelBetter();
    }
}


const dorami = new Dorami();
dorami.walk(); // ドラみは歩く 気分が良くなる

継承後

ロボットクラス.js

class Robot {
    constructor() {
        this.name = 'ロボット'
    }

    walk() {
        alert(`${this.name}は歩く`);
    }
}

ドラえもんクラス.js

class Doraemon extends Robot {
    constructor() {
        super();
        this.name = 'ドラえもん';
    }
}

const doraemon = new Doraemon();
doraemon.walk(); // ドラえもんは歩く

ドラみクラス.js

class Dorami extends Robot {
    constructor() {
        super();
        this.name = 'ドラみ';
    }
    
    feelBetter() {
        alert('気分が良くなる');
    }
    
    walk() {
        super.walk();
        this.feelBetter();
    }
}

const dorami = new Dorami();
dorami.walk(); // ドラみは歩く 気分が良くなる

参考

• クラスの継承