상속

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 24번째.

JavaScript OOP에서의 상속은 한 클래스가 다른 클래스의 모든 속성과 메서드에 접근할 수 있게 하는 방법입니다.

예제를 살펴보겠습니다. 부모 클래스를 생성합니다:

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

이제 Vehicle을 상속받는 자식 클래스를 만듭니다:

// Car는 Vehicle을 상속받습니다
class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

자식 클래스의 인스턴스를 생성합니다:

const myCar = new Car("Toyota", "Camry");

속성과 메서드에 접근하기:

console.log(myCar.brand);  // "Toyota" - Vehicle에서 상속됨
console.log(myCar.model);  // "Camry" - Vehicle에서 상속됨
// Car는 Vehicle의 메서드에 접근할 수 있습니다
myCar.drive();  // "Driving!" - Vehicle에서 상속됨
// Car는 자체 메서드도 가지고 있습니다
myCar.honk();   // "Beep beep!" - Car 전용

챌린지

Animal 클래스와 이를 상속받는 Dog 클래스가 주어집니다. 여러분의 과제는 이름이 "Buddy"이고 나이가 3인 myDog 객체를 생성하는 것입니다.

치트 시트

상속을 사용하면 extends 키워드를 사용하여 한 클래스가 다른 클래스의 속성과 메서드에 접근할 수 있습니다.

부모 클래스:

class Vehicle {
 constructor(brand, model) {
   this.brand = brand;
   this.model = model;
 }
 drive() {
   console.log("Driving!");
 }
}

부모로부터 상속받는 자식 클래스:

class Car extends Vehicle {
 honk() {
   console.log("Beep beep!");
 }
}

자식 클래스는 부모 클래스의 모든 속성과 메서드를 상속받으며, 자신만의 속성과 메서드를 가질 수도 있습니다:

const myCar = new Car("Toyota", "Camry");
console.log(myCar.brand);  // "Toyota" - 상속됨
myCar.drive();  // "Driving!" - 상속됨
myCar.honk();   // "Beep beep!" - 자체 메서드

직접 해보기

import { Dog } from './animal.js';

// TODO: 이름이 "Buddy"이고 나이가 3인 myDog 객체를 생성하세요.


// 테스트 코드 - 수정하지 마세요
console.log(myDog.name);  // "Buddy"가 출력되어야 함
console.log(myDog.age);  // 3이 출력되어야 함