JavaScript

javaScriptでクラスを作ってみた

javaScriptでクラスを作ってみた 継承を使うと簡単に少し違うクラスが作れる!

javaScriptでクラスを使いたくて、クラスの作り方と継承についてメモしておきます。

javaScriptでのクラスの作り方

クラスを作り「new クラス名()」と書くと、そのクラスで書いたプロパティやメソッドを持ったオブジェクトが作られます。

クラスを作る

クラス宣言をしクラスを作ります。クラスの中には1つのコンストラクターを置き、プロパティやメソットを追加していきます。

new演算子を使ってクラスからオブジェクトを生成すると、クラスに書いたメソッドも使えます。

// クラス
class Person {
  // コンストラクター
  constructor (firstName, lastName, sex, age) {
    // thisを使ってプロパティを設定
    this.firstName = firstName;
    this.lastName = lastName;
    this.sex = sex;
    this.age = age;
  }

  // メソッド
  getName() {
    return `${this.lastName} ${this.firstName}`;
  }
}

// Personオブジェクトを作り、名前を出力する
const person = new Person('太郎', '山田', '男', 20);
console.log(`${person.getName()}の年齢は${person.age}です。`);

継承

継承を使うと、元のクラスから内容を変えて簡単に別のクラスを作ます。元のクラスを「親クラス」、継承したクラスを「子クラス」や「サブクラス」と呼びます。

クラスの継承はextendsキーワードを使います。class 子クラス名 extends 親クラス名の構文で継承できます。子クラスから親クラスのコンストラクターやメソッドを呼び出す時は「super」を使います。

// 上のPersonクラスが書いてある前提

  class Student extends Person{
      // コンストラクター
      constructor (firstName, lastName, sex, age, studentID) {
          super(firstName, lastName, sex, age);
          this.studentID = studentID;
      }

      //メソッド（ステータス文字列取得）
      getStudenInfo() {
          return `学籍番号:${this.studentID} 氏名：${super.getName()}`;
      }
  }

  const student1001 = new Student('花子', '山田', '女', '18', 1001);
  console.log(student1001.getStudenInfo());