superキーワードの使い方 | 継承とサブクラス | JavaScript 超完全入門 基本から発展までのすべて

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

superキーワードとは?

superキーワードは、JavaScriptの継承において、子クラス(サブクラス)から親クラス(スーパークラス)のコンストラクタやメソッドを呼び出すために使用されます。superを使うことで、親クラスのプロパティやメソッドにアクセスし、それらを子クラス内で利用することが可能になります。

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プロパティが継承され、さらにbreedプロパティがDogクラス内で追加されています。

superで親クラスのメソッドを呼び出す

子クラスで親クラスのメソッドを呼び出す場合にも、superを使用します。これにより、子クラス内で親クラスのメソッドを再利用しながら、必要に応じて上書きすることができます。

superを使ったメソッド呼び出しの例

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()を使って親クラスAnimalspeakメソッドを呼び出しています。その後、Dogクラス独自の処理が続きます。

superとメソッドオーバーライド

子クラスで親クラスのメソッドをオーバーライドしつつ、親クラスのメソッドも活用する場合にsuperは非常に便利です。superを使うことで、親クラスのメソッドを再利用しながら、子クラスで追加のロジックを実装することができます。

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

class Vehicle {
    constructor(brand) {
        this.brand = brand;
    }

    startEngine() {
        console.log(this.brand + " engine started.");
    }
}

class Car extends Vehicle {
    startEngine() {
        super.startEngine();  // 親クラスのstartEngineを呼び出し
        console.log(this.brand + " is ready to go!");
    }
}

const car = new Car("Toyota");
car.startEngine();  
// "Toyota engine started."
// "Toyota is ready to go!"

この例では、Carクラスが親クラスVehiclestartEngineメソッドをオーバーライドしていますが、super.startEngine()で親クラスのメソッドを呼び出し、その後に独自の処理を追加しています。

親クラスのプロパティにアクセスする

親クラスのコンストラクタ内で初期化されたプロパティにも、superを使わずにアクセスできます。thisキーワードを使うことで、親クラスのプロパティに直接アクセスし、子クラスでその値を利用できます。

親クラスのプロパティにアクセスする例

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

class Cat extends Animal {
    introduce() {
        console.log("My name is " + this.name);
    }
}

const cat = new Cat("Whiskers");
cat.introduce();  // "My name is Whiskers"

この例では、Catクラスが親クラスAnimalからnameプロパティを継承し、introduceメソッド内でそのプロパティにアクセスしています。

superを使う際の注意点

子クラスのコンストラクタ内でsuper()を呼び出す前にthisを使用するとエラーになります。super()は、thisが使われる前に必ず呼び出されなければなりません。また、親クラスのコンストラクタが引数を取る場合は、superを呼び出す際にそれらの引数を渡す必要があります。

superを使う際の注意点の例

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

class Dog extends Animal {
    constructor(name, breed) {
        // thisを使う前にsuperを呼び出す必要がある
        super(name);
        this.breed = breed;
    }
}

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

この例では、super(name)が先に呼び出され、その後this.breedを設定しています。super()を呼び出さずにthisを使うと、エラーが発生します。

まとめ

JavaScriptのsuperキーワードを使うことで、子クラスから親クラスのコンストラクタやメソッドにアクセスできます。super()はコンストラクタ内で使われ、super.method()は親クラスのメソッドを呼び出すために使われます。親クラスの機能を再利用しつつ、子クラスでオーバーライドや拡張を行うことができ、オブジェクト指向プログラミングを効果的に行うための重要なツールです。

Amazonロゴ
   
ad.価格範囲を指定して商品を探せます。セールで助かる便利ツール
超完全入門
スポンサーリンク
このページをメモ、または、シェア