CodeGym /コース /Frontend SELF JA /クラスの継承

クラスの継承

Frontend SELF JA
レベル 40 , レッスン 0
使用可能

7.1 継承の基本

JavaScriptのクラス継承は、既存のクラスを基に新しいクラスを作成し、その機能を再利用して拡張することができるんだ。これはオブジェクト指向プログラミング (OOP) の重要な側面で、クラスの階層を作成し、オブジェクトの振る舞いを管理するのに役立つよ。

クラスの継承にはキーワードextendsを使うんだ。他のクラスを継承するクラスを派生クラス (subclass) と呼び、継承されるクラスを基底クラス (superclass) と呼ぶよ。

例:

JavaScript
    
      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()を持つ基底クラスだよ。
  • クラスDogAnimalを継承し、メソッドspeak()をオーバーライドしてるんだ。
  • Dogクラスのインスタンスdogは、オーバーライドされたメソッドspeak()を使うよ。

7.2 キーワードsuper

キーワードsuperは、派生クラスから基底クラスのコンストラクタやメソッドを呼び出すのに使うよ。

1. 基底クラスのコンストラクタを呼び出す

派生クラスはthisを使う前にsuper()を使って基底クラスのコンストラクタを呼び出さなければならないよ。

例:

コンストラクタDogsuper(name)を呼び出して、基底クラスAnimalのプロパティnameを初期化してるよ。

JavaScript
    
      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');
      console.log(dog.name); // "Rex"
      console.log(dog.breed); // "Labrador"
      dog.speak(); // "Rex barks."
    
  

2. 基底クラスのメソッドを呼び出す

基底クラスのメソッドは派生クラスからsuperを使って呼び出せるよ。

例:

クラスDogのメソッドspeak()super.speak()を使って基底クラスAnimalのメソッドspeak()を呼び出し、その後に自分のロジックを実行するんだ。

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          super.speak(); // 基底クラスのメソッドを呼び出す
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak();

      // "Rex makes a noise."
      // "Rex barks."
    
  

7.3 継承とメソッドのオーバーライド

継承は派生クラスが基底クラスのメソッドをオーバーライドすることを可能にするんだ。これにより、メソッドの機能を変更したり拡張したりできるよ。

例:

クラスDogのメソッドspeak()は、基底クラスAnimalのメソッドspeak()をオーバーライドして、自分の実装を提供してるんだ。

JavaScript
    
      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 animal = new Animal('Generic Animal');
      animal.speak(); // "Generic Animal makes a noise."

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

7.4 継承と追加のメソッド

派生クラスは基底クラスに存在しない新しいメソッドを追加できるんだ。

例:

クラスDogは、基底クラスAnimalには存在しない新しいメソッドfetch()を追加してるよ。

JavaScript
    
      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.`);
        }

        fetch() {
          console.log(`${this.name} is fetching.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
      dog.fetch(); // "Rex is fetching."
    
  

7.5 継承の確認

継承を確認するにはinstanceof演算子とisPrototypeOf()メソッドを使用できるよ。

例:

instanceof演算子はオブジェクトがクラスのインスタンスであるかどうかをチェックするんだ。isPrototypeOf()メソッドは、オブジェクトのプロトタイプが他のオブジェクトのプロトタイプチェーンの一部であるかどうかを確認するよ。

JavaScript
    
      console.log(dog instanceof Dog); // true
      console.log(dog instanceof Animal); // true
      console.log(Animal.prototype.isPrototypeOf(Dog.prototype)); // true
    
  
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION