상속은 객체 지향 프로그래밍의 핵심 개념으로, 기존 클래스를 확장하고 해당 속성과 메소드를 활용할 수 있게 해줍니다. JavaScript는 ES6의 도입으로 보다 새롭고 강력한 상속 구문을 도입하였으며, 이는 원래의 프로토타입 방법보다 훨씬 다루기 쉽습니다. 이 가이드에서는 당신에게 extends 키워드를 사용하여 JavaScript에서 상속을 적용하는 방법을 보여주고, 기본 클래스의 생성자를 super를 사용하여 올바르게 호출하는 방법을 단계별로 설명하겠습니다.
주요 발견사항
- JavaScript에서의 상속은 extends 키워드를 통해 이루어집니다.
- 기본 클래스의 생성자는 super를 사용하여 호출되어야 합니다.
- 인스턴스 변수는 파생 클래스에서 this 키워드를 통해 참조될 수 있습니다.
단계별 가이드
기본 클래스 만들기
상속을 시작하기 위해 먼저 Shape라는 이름의 기본 클래스를 생성합니다. 이 클래스에서 생성자 및 몇 가지 메소드를 정의합니다.
여기서 당신은 생성자를 가진 Shape 클래스를 정의합니다. 이 생성자에서 다른 클래스가 접근할 수 있는 변수와 함수를 정의할 수 있습니다.
서브클래스 탐색하기
기본 클래스를 생성한 후 이제 Shape에서 상속하는 서브클래스를 만들 수 있습니다. 이 예제에서는 새 클래스를 ConcreteShape라고 부릅니다.
이 서브클래스에서는 extends 키워드를 사용하여 ConcreteShape가 Shape에서 상속된다는 것을 명시합니다. 서브클래스의 생성자는 super()를 호출하여 기본 클래스 Shape의 생성자를 호출하는데, 이는 상속을 올바르게 구현하기 위해 필요합니다.
서브클래스 인스턴스화하기
이제 서브클래스를 생성했으니, 이 클래스의 인스턴스를 생성할 시간입니다.
여기서 당신은 ConcreteShape 클래스의 새로운 객체 myShape를 생성하고, 생성자에게 설명을 전달합니다. 그런 다음 설명을 출력하는 print 메소드를 호출합니다.
추가 속성 추가하기
서브클래스에 추가 속성을 추가하거나 이 서브클래스에만 해당되는 메소드를 추가할 수 있습니다.
여기서 당신은 생성자에 추가 매개변수를 추가하여 ConcreteShape 클래스를 확장했습니다.
상속 활용하기
super 키워드를 사용하여 기본 클래스의 describe 메소드를 호출하여 기본 클래스와 서브클래스의 속성을 결합할 수 있습니다.
요약 - JavaScript의 상속: ES6에서 ES13까지
이 튜토리얼에서는 JavaScript에서의 상속이 어떻게 작동하는지, 특히 새로운 class 구문을 사용하는 방법을 배웠습니다. 클래스 정의, 기본 클래스에서 상속받는 방법, 생성자를 올바르게 호출하는 방법을 보았습니다. 이러한 메커니즘은 기능을 효율적으로 재사용하여 코드 기반을 깔끔하고 유지 보수하기 쉽게 만들어 줍니다.
자주 묻는 질문
super()와 this의 차이는 무엇인가요?super()는 기본 클래스의 생성자를 호출하는 데 사용되며, while this는 현재 클래스의 인스턴스에 접근합니다.
ES6 클래스를 사용하는 것이 프로토타입보다 나은 이유는 무엇인가요?ES6 클래스는 코드를 보다 쉽고 명확하게 이해할 수 있는 구문을 제공하여 코드 읽기를 수월하게 합니다.
여러 개의 기본 클래스를 가질 수 있나요?아니요, JavaScript는 다중 상속을 지원하지 않습니다. 하나의 클래스는 오직 하나의 다른 클래스에서만 상속받을 수 있습니다.
super()를 호출하지 않으면 어떻게 되나요?super()를 호출하지 않으면 클래스에 필요한 것을 초기화하는 기본 클래스의 생성자가 실행되지 않기 때문에 오류가 발생합니다.
