extends

BaselineWidely available

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

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)에서 발췌했습니다.

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)에서 발췌했습니다.

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으로부터 상속받지 않은 것을 제외하면 보통 클래스처럼 동작합니다.

class nullExtends extends null {  constructor() {}}Object.getPrototypeOf(nullExtends); // Function.prototypeObject.getPrototypeOf(nullExtends.prototype); // null