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】Local Storageに複数のデータをJSON形式で保存。配列で取得する方法

2022.11.20
4664
JavaScript

Swiperでスライドの幅を固定・中央寄せにする方法

2023.10.04
5199
JavaScript

JavaScriptで経過ミリ秒を取得。単位を秒・分に変換する方法

2023.01.19
5100
JavaScript

Javascriptでvideoタグのオプションを設定

更新日:2019.11.28
813