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 的子類別。此範例提取自線上示例。

js
class Square extends Polygon {
  constructor(length) {
    // Here, it calls the parent class' constructor with lengths
    // provided for the Polygon's width and height
    super(length, length);
    // Note: In derived classes, super() must be called before you
    // can use 'this'. Leaving this out will cause a reference error.
    this.name = "Square";
  }

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

使用 extends 於內建類別

這個範例擴展了內建的 Date 類別。此範例提取自線上範例。

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，但新對象的原型不會繼承 Object.prototype。

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

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

new nullExtends(); //ReferenceError: this is not defined

標準

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年7月16日 by MDN contributors.

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

extends

In this article

Help improve MDN