We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

extends キーワードは、class 宣言class 式内で、他のクラスの子としてクラスを作成するために使用します。


class ChildClass extends ParentClass { ... }


extends キーワードは、カスタムクラスやビルトインオブジェクトをサブクラス化するために使用できます。

.prototype 拡張は、Objectnull の必要があります。

extends の使用

最初の例は、Polygon と呼ばれるクラスから Square と呼ばれるクラスを作成します。この例は、ライブデモ (ソース) から転載しています。

class Square extends Polygon {
  constructor(length) {
    // ここでは、親クラスのコンストラクタを呼び出し、
    // Polygon の幅と高さの length を与えます。
    super(length, length);
    // Note: 引き出されたクラスでは、'this' を使う前に
    // super() を呼び出さなくてはなりません。 こうしなければ、参照エラーになります。
    this.name = 'Square';

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

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

ビルトインオブジェクトでの extends の使用

この例は、組み込みの Date オブジェクトを拡張します。この例は、ライブデモ (ソース) から転載しています。

class myDate extends Date {
  constructor() {|

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

null の拡張

プロトタイプオブジェクトが Object.prototype を継承しない点を除いて、null の継承は通常のクラスのように動作します。

class nullExtends extends null {
  constructor() {}

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

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


仕様 状況 コメント
ECMAScript 2015 (6th Edition, ECMA-262)
extends の定義
標準 初期定義
ECMAScript Latest Draft (ECMA-262)
extends の定義


機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応4911345 なし369
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? あり1345 ?9 あり

1. From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".



このページの貢献者: YuichiNukiyama, ambi, Marsf
最終更新者: YuichiNukiyama,