Written by Kasumi

JavaScriptでクラスを継承。親の関数・メソッドを子で呼び出す方法

JavaScriptでクラスを継承し、子クラスを作成。

親クラスの関数・メソッドを子クラスで呼び出したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

クラスを継承する

// 親クラス
class Intro {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log("初めまして" + this.name + "です。");
  }
}

// 子クラスへ継承
class Age extends Intro {}

// 子クラスをインスタンス化
const kasumi = new Age("kasumi","30");

// コンソールにhelloメソッドを出力
console.log(kasumi.hello());

// 初めましてkasumiです。

クラスを継承するコード例です。

Introクラスを元に、Ageクラスを作成。

Ageクラスをインスタス化。

上記クラスから親Introクラスのhelloメソッドを使い、コンソールにテキストを出力してます。

クラスの継承にはextendsキーワードを使います。

extendsの使い方は以下の通りです。

class 子クラス名 extends 親クラス名 {}

上記のように記述する事で親クラスの関数・メソッドを引き継いだ子クラスを定義できます。

親クラスの関数・メソッドを呼び出す

// 親クラス
class Intro {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log("初めまして" + this.name + "です。");
  }
}

// 子クラスへ継承
class Age extends Intro {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  hello() {
    super.hello();
    console.log("年齢は " + this.age + "歳です。");
  }
}

// 子クラスをインスタンス化
const kasumi = new Age("kasumi", "30");
// コンソールにhelloメソッドを出力
console.log(kasumi.hello());
// 初めましてkasumiです。
// 年齢は 30歳です。

子クラスから親クラスの関数・メソッドを呼び出すコード例です。

親Introクラスのコンストラクタ関数で定義されたnameプロパティを子Ageクラスへ呼び出し。

新たにageプロパティをオブジェクトに追加してます。

また、親Introクラスのhelloメソッドも呼び出してます。

子クラスから親クラスの関数・メソッドを呼び出すにはsuperキーワードを使います。

親のコンストラクタを呼び出す場合
super(…)

親のメソッドを呼び出す場合
super.メソッド名(…)

上記のように使用します。

以上で親クラスの関数・メソッドを呼び出す事が可能になります。

まとめ

JavaScriptでクラスを継承。親の関数・メソッドを子で呼び出す方法について紹介しました。

以上で解説を終わります、

目次

関連記事

JavaScript

【JavaScript】文字列から必要な特定文字のみ切り出す方法

2023.01.27
286
JavaScript

JavaScriptでオブジェクトに指定したプロパティが存在しているかすぐ確認する方法

2022.12.19
322
JavaScript

【JavaScript】変数や関数をファイル分割。必要な時に読み込みする方法【モジュール化しよう】

2023.01.06
195
JavaScript

【JavaScript初心者向け】文字列・配列の要素数を調べる方法

2022.08.23
195