상속된 메서드 오버라이딩

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

메서드 오버라이딩은 자식 클래스가 부모 클래스로부터 상속받은 메서드에 대해 자체적인 구현을 제공하는 것을 말합니다. 자식 클래스의 버전이 부모 클래스의 버전을 "오버라이드"(대체)합니다.

간단한 예시:

메서드가 있는 부모 클래스를 만듭니다:

class Vehicle {
  start() {
    return "Vehicle starting...";
  }
}

부모 클래스를 확장하는 자식 클래스를 생성합니다:

class Car extends Vehicle {
  // 이것은 Vehicle의 start() 메서드를 오버라이드합니다
  start() {
    return "Car engine roaring to life!";
  }
}

클래스를 사용합니다:

const vehicle = new Vehicle();
const car = new Car();

console.log(vehicle.start());      // "Vehicle starting..." (원본)
console.log(car.start());          // "Car engine roaring to life!" (오버라이드됨)

오버라이딩의 주요 규칙:

부모와 동일한 메서드 이름

동일하거나 호환 가능한 매개변수

자식 객체에서 자식 버전이 호출됩니다

특별한 키워드가 필요하지 않습니다 - 그저 메서드를 정의하기만 하면 됩니다

챌린지

Shape 부모 클래스와 Circle 자식 클래스가 주어집니다. 부모 클래스에는 0을 반환하는 calculateArea() 메서드가 있습니다.

여러분의 과제는 Circle 클래스에서 calculateArea() 메서드를 오버라이드하여 원의 실제 넓이를 계산하는 것입니다.

원의 넓이 공식은 다음과 같습니다: π × radius²
JavaScript에서는: Math.PI * this.radius * this.radius

치트 시트

메서드 오버라이딩(Method overriding)은 자식 클래스가 부모 클래스로부터 상속받은 메서드에 대해 자신만의 구현을 제공할 때 발생합니다. 자식 클래스의 버전이 부모 클래스의 버전을 대체합니다.

예제:

class Vehicle {
  start() {
    return "Vehicle starting...";
  }
}

class Car extends Vehicle {
  // Vehicle의 start() 메서드를 오버라이드합니다
  start() {
    return "Car engine roaring to life!";
  }
}

const vehicle = new Vehicle();
const car = new Car();

console.log(vehicle.start());  // "Vehicle starting..."
console.log(car.start());      // "Car engine roaring to life!"

주요 규칙:

부모와 동일한 메서드 이름을 사용합니다
동일하거나 호환 가능한 매개변수를 사용합니다
자식 객체에서는 자식 클래스의 버전이 호출됩니다
특별한 키워드가 필요하지 않습니다 - 자식 클래스에서 메서드를 정의하기만 하면 됩니다

직접 해보기

import { Shape } from './shapes.js';
import { Circle } from './shapes.js';

// 구현한 내용을 테스트하세요
const myCircle = new Circle(5);
console.log(myCircle.calculateArea());