extends

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016년 3월.

extends 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용됩니다.

시도해 보기

class DateFormatter extends Date {
  getFormattedDate() {
    const months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    return `${this.getDate()}-${months[this.getMonth()]}-${this.getFullYear()}`;
  }
}

console.log(new DateFormatter("August 19, 1975 23:15:30").getFormattedDate());
// Expected output: "19-Aug-1975"

구문

class ChildClass extends ParentClass { ... }

설명

extends 키워드는 내장 객체뿐만 아니라 사용자 정의 클래스를 하위 클래스로 만들기 위해 사용될 수 있습니다.

확장( 클래스)의 .prototype은 Object 또는 null이어야 합니다.

예

extends 사용하기

첫 번째 예는 Polygon 클래스로부터 Square 클래스를 만듭니다. 이 예는 live demo (source)에서 발췌했습니다.

js
class Square extends Polygon {
  constructor(length) {
    // 여기서, length와 함께 부모 클래스의 생성자를 호출
    // Polygon의 너비 및 높이가 제공됨
    super(length, length);
    // 주의: 파생 클래스에서, super()가 먼저 호출되어야 'this'를
    // 사용할 수 있습니다. 이를 빼먹으면 참조 오류가 발생합니다.
    this.name = "Square";
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }
}

내장 객체에 extends 사용하기

이 예제는 내장 객체 Date를 확장합니다. 이 예제는 live demo (source)에서 발췌했습니다.

js
class myDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    return (
      this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear()
    );
  }
}

null 확장

null에서 확장은 prototype 객체가 Object.prototype으로부터 상속받지 않은 것을 제외하면 보통 클래스처럼 동작합니다.

js
class nullExtends extends null {
  constructor() {}
}

Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype); // null

명세서

Specification

ECMAScript® 2027 Language Specification
# sec-class-definitions

브라우저 호환성

Enable JavaScript to view this browser compatibility table.

참조

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025년 2월 11일 by MDN contributors.

View this page on GitHub • Report a problem with this content

extends

In this article

Help improve MDN