【javascript】クラス継承

クラス継承

Prototype継承のクラス盤
hogehoge.prototype = Object.create(Hage.prototype)

case：クラスに書き換えて継承をする。

Personクラスを継承した、Japaneseクラスを作成する。

//元になるコード

function Person(name, age) {
  this.name = name;
  this.age = age;
}

function Japanese(name, age, gender) {
  Person.call(this, name, age);
  this.gender = gender;
}

Japanese.prototype = Object.create(Person.prototype);

Japanese.prototype.hello = function() {
  console.log('Konnichiwa ' + this.name);
}

Japanese.prototype.bye = function() {
  console.log('Sayonara ' + this.name);
}

const taro = new Japanese('Taro', 23, 'Male');

書き換え

class Person{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  hello(){
    console.log('hello ' + this.name);
  }
}

// extendsの後に継承元を指定する。
//extendsは`Japanese.prototype = Object.create(Person.prototype);`にあたる。
class Japanese extends Person{
  constructor(name, age, gender){
    super(name, age);　//superでPersonクラスの引数を継承
    this.gender = gender　//Japaneseクラス独自のプロパティ,親のクラスをsuperで初期化した後に記述。
  }
  hello() {
        super.hello();//親のクラスのhelloが呼び出される。
        console.log('Konnichiwa ' + this.name);
    }
  bye() {
    console.log('Sayonara ' + this.name);
}
}


const taro = new Japanese('Taro', 23, 'Male');

PrototypeがPersonを継承しているのが確認できる。

superを使ったオブジェクトリテラルの継承

1. setPrototypeOf(第一引数：継承先,第二引数：継承元)を使用し、americanオブジェクトのhello()メソッドをbobが継承
2. bobオブジェクト内でsuperを使用し、継承先のhello()メソッドを呼び出している。

const american = {
    hello() {
        console.log('hello ' + this.name);
    }
}

const bob = {
    name: 'Bob',
    hello() {
        super.hello();
    }
}

Object.setPrototypeOf(bob, american);
bob.hello();