extendsキーワードによる継承 | 継承とサブクラス | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

継承とは？

JavaScriptの継承は、あるクラス（親クラス）のプロパティやメソッドを別のクラス（子クラス）が引き継ぐ仕組みです。継承を使用することで、共通の機能を持つ複数のクラスを効率的に作成し、コードの再利用性を高めることができます。

extendsキーワードによる継承

JavaScriptでは、extendsキーワードを使ってクラスの継承を行います。extendsを使用することで、親クラス（スーパークラス）からプロパティやメソッドを継承した子クラス（サブクラス）を定義することができます。

extendsを使った継承の基本例

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

    speak() {
        console.log(this.name + " makes a noise.");
    }
}

class Dog extends Animal {
    speak() {
        console.log(this.name + " barks.");
    }
}

const dog = new Dog("Rex");
dog.speak();  // "Rex barks."

この例では、Animalクラスが定義され、そのメソッドspeakがDogクラスで継承されています。DogクラスはAnimalクラスを継承しながら、speakメソッドを独自に上書きしています。

superキーワードの使用

継承を行う際、子クラスから親クラスのコンストラクタやメソッドを呼び出す必要がある場合、superキーワードを使用します。superは、親クラスのプロパティやメソッドにアクセスするために使われます。

superを使った親クラスのコンストラクタ呼び出し

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

    speak() {
        console.log(this.name + " makes a noise.");
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);  // 親クラスのコンストラクタを呼び出し
        this.breed = breed;
    }

    speak() {
        console.log(this.name + " barks.");
    }
}

const dog = new Dog("Rex", "Labrador");
dog.speak();  // "Rex barks."
console.log(dog.breed);  // "Labrador"

この例では、Dogクラス内でsuper(name)を使い、親クラスAnimalのコンストラクタを呼び出してnameプロパティを初期化しています。さらに、Dogクラスでbreedという新しいプロパティを追加しています。

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

子クラスで親クラスのメソッドを上書き（オーバーライド）することができます。オーバーライドすることで、親クラスと同じ名前のメソッドに異なる動作を持たせることが可能です。これにより、継承されたクラスのメソッドをカスタマイズできます。

メソッドのオーバーライドの例

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

    speak() {
        console.log(this.name + " makes a noise.");
    }
}

class Dog extends Animal {
    speak() {
        super.speak();  // 親クラスのspeakメソッドを呼び出し
        console.log(this.name + " barks.");
    }
}

const dog = new Dog("Rex");
dog.speak();  
// "Rex makes a noise."
// "Rex barks."

この例では、Dogクラスでspeakメソッドがオーバーライドされていますが、super.speak()を使って親クラスAnimalのspeakメソッドも同時に呼び出しています。

サブクラスでの新しいメソッド追加

子クラス（サブクラス）は、親クラスで定義されていない新しいメソッドを追加することができます。これにより、サブクラス特有の機能を持たせることができ、クラスの機能を拡張することが可能です。

サブクラスでの新しいメソッドの例

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

    speak() {
        console.log(this.name + " makes a noise.");
    }
}

class Bird extends Animal {
    fly() {
        console.log(this.name + " is flying.");
    }
}

const bird = new Bird("Parrot");
bird.speak();  // "Parrot makes a noise."
bird.fly();    // "Parrot is flying."

この例では、BirdクラスがAnimalクラスを継承し、新しいメソッドflyを追加しています。Birdのインスタンスは、親クラスのspeakメソッドを使うことができるだけでなく、独自のflyメソッドも利用できます。

まとめ

JavaScriptのextendsキーワードを使うことで、クラスの継承が簡単に行えます。継承を使うことで、コードを再利用しやすくなり、親クラスから共通のプロパティやメソッドを引き継ぐことができます。さらに、superキーワードを使って親クラスのコンストラクタやメソッドにアクセスし、子クラスでのメソッドのオーバーライドや独自の機能を追加することも可能です。これにより、オブジェクト指向プログラミングがより強力に、効率的に行えるようになります。

スポンサーリンク