Chapter 4 - Item 38. 서브클래스 생성자에서 반드시 슈퍼클래스 생성자를 호출하라

자바스크립트에서 클래스 상속(extends)을 사용할 때
서브클래스의 생성자는 슈퍼클래스의 초기화 작업을 반드시 거쳐야 하는데,

super()가 그 역할을 한다.

 

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Animal의 생성자 호출
    this.breed = breed;
  }
}

const d = new Dog("Max", "Beagle");
console.log(d.name);  // Max
console.log(d.breed); // Beagle

 

 

 

ES5 시절에는 call이나 apply로 부모 생성자를 직접 호출했다.

function Animal(name) {
  this.name = name;
}

function Dog(name, breed) {
  Animal.call(this, name); // 부모 생성자 호출
  this.breed = breed;
}

이렇게 하지 않으면 this가 초기화되지 않아 에러가 발생하거나, 상위 클래스 필드가 빠져서 동작이 깨졌다.

 

 

 

---

 

 

 

ES6이후, 클래스 문법에서 서브클래스 생성자는 super() 호출 전에는 this를 사용할 수 없다.

호출하지 않으면 ReferenceError가 발생한다.

 

class Dog extends Animal {
  constructor(name, breed) {
    // super() 생략 시
    this.breed = breed; // ReferenceError: Must call super constructor
  }
}

ES6 클래스는 super 호출 → this 생성 → 인스턴스 초기화 순서로 동작하기 때문이다. 

 

그래서 슈퍼클래스에서 초기화하는 속성이 있다면, 반드시 super()를 호출하고 값을 넘겨야 한다.

만약 생성자 오버라이드가 필요 없는 경우엔, 아예 constructor를 생략하면 자동으로 부모 생성자가 호출된다.

 

 

그리고 만약 부모 메서드를 호출하고 싶을때도 super()를 이용하면 된다.

class Dog extends Animal {
  speak() {
    super.speak();
    console.log("Woof!");
  }
}

 

 

 

 

 

• ES5: Parent.call(this, …) 또는 apply로 부모 생성자 호출.
• ES6: super() 필수, 호출 전에는 this 접근 불가.
• 생성자 오버라이드가 필요 없으면 아예 작성하지 않는 것이 안전.
• super는 생성자뿐 아니라 메서드 재정의 시에도 유용하게 쓰인다.