オーバーライドについて

初めに

• Progateで学んだことをアウトプットすることで学習効率向上を図ると同時に備忘録がてらに記事を書いていきます。

オーバライドとは

• 親クラスで書かれたメソッドを子クラスでも記述すること。

• 子クラスで記述したメソッドが優先的に実行される。

• 子クラスにオーバーライドしたメソッドに追加で記述することもできる(上書き)

具体例

script.js

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("こんにちは");
  }
  
  info() {
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

class Dog extends Animal {
 
  

  getHumanAge() {
    return this.age * 7;
  }
}

const dog = new Dog("レオ", 4);
dog.info();

• 親クラスがAnimal、子クラスがDog

• class Dog extends Animal {}でDogクラスにAnimal クラスが継承している。

• Animalクラスで記述しているinfoメソッドをDogクラスにオーバーライドし、さらに追加で処理を記述する

Dogクラスにinfoメソッドを追加していく

script.js

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("こんにちは");
  }
  
  info() {
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

class Dog extends Animal {
  
  info(){
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
    
    const humanAge = this.getHumanAge();
    console.log(`人間年齢で${humanAge}歳です`);
  }

  getHumanAge() {
    return this.age * 7;
  }
}

const dog = new Dog("レオ", 4);
dog.info();

• Dogクラスにinfo(){}を記述することでinfoメソッドのオーバーライドを行った。

  Dogクラスのinfoメソッドをピックアップする。

info(){
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
    
    const humanAge = this.getHumanAge();
    console.log(`人間年齢で${humanAge}歳です`);
  }

• Dogクラスではconst humanAge = this.getHUmanAge();とconsolo.log(${humanAge}歳です)を追加し、上書きを行った。

  コンソール

名前はレオです
4歳です
人間年齢で28歳です

結語

• 親クラスで記述したメソッドを子クラスでも同じように記述することをオーバーライドと言う。

• オーバーライドしたメソッドは子クラスが優先的に実行される。