extends

Kata kunci extends digunakan pada class declarations atau class expressions untuk membuat sebuah class yang merupakan turunan dari class lain.

Sumber kode dari contoh interaktif ini disimpan di repositori GitHub. Jika Anda tertarik untuk berkontribusi dengan proyek contoh interaktif, silahkan menduplikasi repositori https://github.com/mdn/interactive-examples dan kirimkan ke kami dengan pull request.

Sintaks

class ChildClass extends ParentClass { ... }

Deskripsi

Kata kunci extends dapat digunakan untuk subclass custom classes dan built-in objects.

.prototype dari suatu ekstensi harus berupa sebuah Object atau null.

Contoh

Menggunakan extends

Contoh pertama membuat sebuah class bernama Square dari kelas bernama Polygon. Contoh ini diambil dari live demo (source).

class Square extends Polygon {
  constructor(length) {
    // Disini, obyek dari Square memanggil konstruktor dari parent class dengan argumen lengths yang tersedia
    // untuk width dan height pada Polygon 
    super(length, length);
    // Catatan: Pada kelas turunan, super() harus dipanggil sebelum Anda
    // dapat menggunakan 'this'. Pengabaian terhadap hal tersebut akan menyebabkan reference error.
    this.name = 'Square';
  }

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

Menggunakan extends dengan built-in objects

Contoh berikut mewarisi built-in Date object. Contoh ini diambil dari 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();
  }
}

Extending (Pewarisan) null

Extending/pewarisan dari null bekerja layaknya seperti normal class, dengan pengecualian prototype object tidak mewarisi dari Object.prototype.

class nullExtends extends null {
  constructor() {}
}

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

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

Spesifikasi

Kompatibilitas peramban

Cek juga

• Classes
• super
• Anurag Majumdar - Super & Extends in JavaScript