--- title: extends slug: Web/JavaScript/Reference/Classes/extends tags: - ECMAScript 2015 - JavaScript - Kelas translation_of: Web/JavaScript/Reference/Classes/extends ---
{{jsSidebar("Classes")}}

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

{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}

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 {{jsxref("Object")}} atau {{jsxref("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 {{jsxref("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 {{jsxref("null")}} bekerja layaknya seperti normal class, dengan pengecualian prototype object tidak mewarisi dari {{jsxref("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

Spesifikasi Status Komentar
{{SpecName('ES2015', '#sec-class-definitions', 'extends')}} {{Spec2('ES2015')}} Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}} {{Spec2('ESDraft')}}  

Kompatibilitas peramban

{{Compat("javascript.classes.extends")}}

Cek juga