TIL 23.01.16

오늘은 class 관련 과제를 진행하면서 알게된 내용을 써보려고 한다.

 

Grub class를 상속받기 위해서 Bee class에 extends를 이용하여 상속을 받았고,

기존에 있던  age, color, job 속성에 대해서 재정의를 해주기 위해서

constructor를 생성한 뒤 this를 이용하여 재정의 해주었다.

재정의한 속성의 값들이 잘 바뀔거라고 예상한 것과 달리

ReferenceError가 발생했다.

 

ReferenceError 발생 이유

그 이유를 찾아본 결과, 상속받은 class는 this를 사용 시, 

그 전에 super()를 선언 해 주어야 한다는 것이었다.

 

자바스크립트는 '상속 클래스의 생성자 함수(derived constructor)'와 그렇지 않은 생성자 함수를 구분한다.

상속 클래스의 생성자 함수엔 특수 내부 프로퍼티인 [[ConstructorKind]]:"derived"가 이름표처럼 붙지만, 일반 클래스의 생성자 함수와 상속 클래스의 생성자 함수 간 차이는 new와 함께 드러난다.

• 일반 클래스가 new와 함께 실행되면, 빈 객체가 만들어지고 this에 이 객체를 할당됌.
• 반면, 상속 클래스의 생성자 함수가 실행되면, 일반 클래스에서 일어난 일이 일어나지 않는다. 상속 클래스의 생성자 함수는 빈 객체를 만들고 this에 이 객체를 할당하는 일을 부모 클래스의 생성자가 처리해주길 기대한다.

이런 차이 때문에 상속 클래스의 생성자에선 super를 호출해 부모 생성자를 실행해 주어야 합다. 그렇지 않으면 this가 될 객체가 만들어지지 않아 에러가 발생한다.

 

따라서, 생성자 함수 내부에 super를 호출하여 부모 생성자를 실행해 주었다.

 

작동이 잘 되는 것을 볼 수 있었다.

 

-끝-