[JS] 클래스에서 super()를 호출해야 하는 이유

객체, 클래스, 인스턴스

객체 : key와 value의 쌍으로 구성된 자료형
클래스 : 생성자(constructor)가 있는 객체. 어떠한 객체를 만드는 청사진의 개념으로 관련된 변수와 함수를 묶어 놓는다.
인스턴스 : 클래스로 만든 객체

// 클래스
class Class = { 
	constructor(name, color) { 
	this.name = name; 
	this.color = color; 
	} 
} 

// 인스턴스
const instance = new Class(jay, green);

클래스와 프로토타입

자바스크립트의 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖는데, 기본 값은 null이지만 다른 객체를 참조하는 경우 참조 대상을 가리킨다. 이 경우 참조 대상을 '프로토타입(prototype)'이라고 부른다. 객체는 오직 null 혹은 객체 자료형의 하나의 프로토타입만 상속받을 수 있으며 순환참조는 허용되지 않는다.

자식 클래스의 인스턴스에서 어떤 프로퍼티를 읽으려고 할 때 그 프로퍼티가 없으면, 자바스크립트는 자식 클래스가 참조하는 프로토타입인 부모 클래스에서 해당 프로퍼티를 찾는다.

this와 super

클래스 안에서 쓰이는 this는 클래스의 프로퍼티를 정의한다. 자식 클래스가 상속받은 함수가 실행될 때, 그 함수가 부모 클래스에서 받은 함수더라도 this는 프로토타입의 영향을 받지 않으며 this가 쓰이고 있는 자식 클래스를 가리킨다.

자식 클래스에서 this를 이용하여 새로운 프로퍼티를 부여하거나 상속받은 프로퍼티를 수정하고 싶다면 먼저 super()를 이용하여 부모 클래스의 기존 프로퍼티 값을 호출해야 한다.

자식 클래스에서 생성자 함수(constructor)가 실행되면, 생성자 함수는 빈 객체를 만들고 this가 될 객체를 할당하는 일을 부모 클래스의 생성자가 처리해주기를 기대한다. 그렇기 때문에 super()를 호출해서 부모 클래스의 생성자를 실행해주어야만 this가 될 객체가 만들어지고, this를 사용할 수 있게 된다.

참고문서

프로토타입 상속 - 모던 JavaScript 튜토리얼
함수의 prototype 프로퍼티 - 모던 JavaScript 튜토리얼
클래스 상속 - 모던 JavaScript 튜토리얼