super() メソッド

CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 27/56。

super()メソッドは、親クラスのコンストラクタを使用してオブジェクトを作成および初期化します。子クラスにプロパティを追加する前に、これを呼び出す必要があります。

このように考えてみてください。親クラスがオブジェクトの土台を築き、子クラスが独自の機能を追加する前に、super()が「まずその土台を作って」と伝えているのです。

例を見てみましょう。親クラスを作成します：

class Employee {
  constructor(name) {
    this.name = name;
  }
}

次に、親クラスを継承する子クラスを作成します：

class Manager extends Employee {
  constructor(name, department) {
    super(name); // nameを使用して親のコンストラクタを呼び出す
    this.department = department;
  }
}

ここで行われていること:

constructor(name, department) - Managerはnameとdepartmentの両方を必要とします
super(name) - nameをEmployeeのコンストラクタに渡します

this.department - Manager独自のプロパティを設定します

これにより、継承されたプロパティ（name）と独自のプロパティ（department）の両方を持つManagerが作成されます！

子クラスのインスタンスを作成します：

const myManager = new Manager("Sarah", "Engineering");
console.log(myManager.name);      // "Sarah"
console.log(myManager.department); // "Engineering"

派生クラスのコンストラクタ内で this を使用する前に、super() メソッドを呼び出す必要があります。super() を呼び出さない場合、JavaScript はリファレンスエラーをスローします。

チャレンジ

Mealを継承するSaladクラスが与えられています。Saladはnameとingredientsの両方を持つ必要があります。

あなたのタスクは、以下の手順でSaladクラスのコンストラクタを完成させることです：

nameプロパティを使用してsuper()を呼び出す
ingredientsプロパティを設定する

チートシート

super() メソッドは、親クラスのコンストラクタを使用してオブジェクトを作成し、初期化します。子クラスにプロパティを追加する前に呼び出す必要があります。

子クラスで super() を使用する例：

class Employee {
  constructor(name) {
    this.name = name;
  }
}

class Manager extends Employee {
  constructor(name, department) {
    super(name); // 最初に親のコンストラクタを呼び出す
    this.department = department; // その後、子のプロパティを追加する
  }
}

const myManager = new Manager("Sarah", "Engineering");
console.log(myManager.name);      // "Sarah"
console.log(myManager.department); // "Engineering"

重要なポイント：

子クラスのコンストラクタで this を使用する前に super() を呼び出す必要があります
子から親のコンストラクタに必要な引数を渡します
super() が呼び出されない場合、JavaScript は参照エラー（ReferenceError）をスローします

自分で試してみよう

import { Meal } from './classes.js';
import { Salad } from './classes.js';

// テストコード - 変更しないでください
const salad = new Salad("Caesar", ["lettuce", "croutons", "cheese"]);
console.log(salad.name);       // "Caesar" を出力するはずです
console.log(salad.ingredients); // ["lettuce", "croutons", "cheese"] を出力するはずです