super() 메서드

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 27번째.

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()를 호출하지 않으면 자바스크립트는 참조 에러(reference error)를 발생시킵니다.

챌린지

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); // Call parent constructor first
    this.department = department; // Then add child properties
  }
}

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

주요 사항:

자식 생성자에서 this를 사용하기 전에 반드시 super()를 호출해야 합니다.
자식 클래스에서 부모 생성자로 필요한 인수를 전달하십시오.
super()가 호출되지 않으면 JavaScript에서 참조 에러(reference error)를 발생시킵니다.

직접 해보기

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"]가 출력되어야 함