extends 키워드란 무엇인가?
JavaScript에서 extends 키워드는 클래스 상속(class inheritance)을 구현할 때 사용됩니다. extends를 통해 생성된 자식 클래스는 부모 클래스가 가진 모든 메서드와 속성을 그대로 물려받을 수 있습니다. 이를 통해 코드의 재사용성을 높이고, 중복을 줄이며, 더 체계적인 객체 지향 프로그래밍이 가능해집니다.
기본 동작 원리
자식 클래스는 class 자식클래스 extends 부모클래스 형태로 선언하며, 이렇게 선언된 클래스는 부모 클래스의 모든 기능을 상속받습니다.
예제 코드
아래 예제에서는 extends 키워드를 사용하여 'Company' 클래스의 속성과 메서드를 'Model' 클래스가 상속받는 과정을 보여줍니다.
여기서 핵심은 super() 메서드입니다. super()는 부모 클래스를 가리키며, 생성자(constructor) 내부에서 호출하면 부모 클래스의 생성자를 실행하게 됩니다. 이를 통해 자식 클래스는 부모의 속성과 메서드에 접근할 수 있게 됩니다.
<html>
<body>
<p id="method"></p>
<script>
class Company {
constructor(branch) {
this.name = branch;
}
method() {
return this.name + " has a product that is ";
}
}
class Model extends Company {
constructor(branch, pname) {
super(branch);
this.model = pname;
}
result() {
return this.method() + " " + this.model;
}
}
mycar = new Model("Tutorialspoint", "Tutorix");
document.getElementById("method").innerHTML = mycar.result();
</script>
</body>
</html>실행 결과
Tutorialspoint has a product that is Tutorix
코드 설명
위 코드의 흐름을 단계별로 살펴보면 다음과 같습니다.
1. 부모 클래스(Company) 정의: 생성자에서 브랜치 이름을 받아 this.name에 저장하고, method() 메서드는 제품 소개 문구를 반환합니다.
2. 자식 클래스(Model) 정의: extends Company를 통해 Company를 상속합니다. 생성자 안에서 super(branch)를 호출하여 부모의 생성자를 먼저 실행한 뒤, 자신만의 속성인 this.model을 초기화합니다.
3. 상속된 메서드 활용: Model 클래스의 result() 메서드는 부모에게서 상속받은 method()를 그대로 호출하여 사용합니다. 이것이 상속의 핵심 장점입니다.
4. 객체 생성 및 출력: new Model("Tutorialspoint", "Tutorix")로 인스턴스를 만들고, 결과를 화면에 출력합니다.
정리
extends 키워드와 super() 메서드를 함께 사용하면 JavaScript에서도 깔끔하고 직관적인 클래스 상속 구조를 만들 수 있습니다. 특히 super()는 반드시 생성자 내에서 this를 사용하기 전에 호출해야 한다는 점을 기억해 두시기 바랍니다.