extends 키워드

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

JavaScript의 extends 키워드는 부모 클래스로부터 속성과 메서드를 상속받는 자식 클래스를 생성하는 데 사용됩니다.

먼저 부모 클래스를 만들어 보겠습니다:

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    return `${this.name} makes a noise.`;
  }
}

이제 부모 클래스를 확장하는 자식 클래스를 만들어 보겠습니다:

class Dog extends Animal {
  // Dog 클래스는 Animal로부터 상속받습니다
}

이 간단한 코드는 Dog 클래스가 이제 Animal 클래스의 모든 속성과 메서드를 상속받는다는 것을 의미합니다.

dog 인스턴스를 생성합니다:

const dog = new Dog('Rex');

부모로부터 상속받은 메서드를 호출합니다:

console.log(dog.speak()); // 출력: "Rex makes a noise."

extends 키워드는 자식 클래스(Dog)가 부모 클래스(Animal)에 정의된 모든 기능을 액세스하고 사용할 수 있는 상속 관계를 생성합니다.

챌린지

extends 키워드를 사용하여 Person 클래스를 상속(extends)하는 Student 클래스를 생성하고 내보내세요.

치트 시트

extends 키워드는 부모 클래스로부터 속성과 메서드를 상속받는 자식 클래스를 생성합니다:

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    return `${this.name} makes a noise.`;
  }
}

class Dog extends Animal {
  // Dog은 Animal로부터 상속받습니다
}

const dog = new Dog('Rex');
console.log(dog.speak()); // 출력: "Rex makes a noise."

자식 클래스는 부모 클래스의 모든 속성과 메서드에 접근할 수 있습니다.

직접 해보기

import { Student } from './classes.js';

// 테스트 코드 - 수정하지 마세요
const student = new Student("Emma");
console.log(student.greet());  // "Hello, I'm Emma"가 출력되어야 합니다