従業員のクラスを作成してみます。

Person と Staff のコンストラクターがあるとします。

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

const Staff = function (name, address, department) {
  this.name = name;
  this.address = address;
  this.department = department;
};

Staff クラスで、tanaka を呼び出してみます。

const tanaka = new Staff("田中", "埼玉県", "営業部");

console.log()で確認すると、

image2

コンストラクターが機能しています。

では、prototypeでメッセージを作ってみます。

Staff.prototype.message = function () {
  console.log(`${this.name}さんは、${this.department}所属です。`);
};

tanaka.message();

image3

問題なく、メッセージが表示されました。

親クラスを Person、子クラスを Staff として、クラスを作り替えてみます。

Staff の this.name = namethis.address = addressは、親クラスの Person から使えるようにしましょう。

親クラスから呼び出すには、callメソッドを使用します。

親クラスを呼び出す際、thisを指定することを忘れないようにしましょう。

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

const Staff = function (name, address, department) {
  Person.call(this, name, address);
  this.department = department;
};

image4

クラスの継承ができました。

次は、ES6 の構文でやってみます。

class Person {
  constructor(name, address) {
    this.name = name;
    this.address = address;
  }
}

class Staff {
  constructor(name, address, department) {
    this.name = name;
    this.address = address;
    this.department = department;
  }

  message() {
    console.log(`${this.name}さんは、${this.department}所属です。`);
  }
}

親クラスの Person を継承するには、extendsを使います。

class Person {
  constructor(name, address) {
    this.name = name;
    this.address = address;
  }
}

class Staff extends Person {
  constructor(name, address, department) {
    this.name = name;
    this.address = address;
    this.department = department;
  }

  message() {
    console.log(`${this.name}さんは、${this.department}所属です。`);
  }
}

継承したい内容は、superを使って呼び出します。

class Person {
  constructor(name, address) {
    this.name = name;
    this.address = address;
  }
}

class Staff extends Person {
  constructor(name, address, department) {
    super(name, address);
    this.department = department;
  }

  message() {
    console.log(`${this.name}さんは、${this.department}所属です。`);
  }
}

先程の tanaka で呼び出してみましょう。

const tanaka = new Staff("田中", "埼玉県", "営業部");
tanaka.message();

image5

無事、呼び出すことができました。

ブログ一覧