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
Spesifikasi | Status | Komentar |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'extends' in that specification. |
Standard | Initial definition. |
ECMAScript (ECMA-262) The definition of 'extends' in that specification. |
Living Standard |
Kompatibilitas peramban
BCD tables only load in the browser