Class adalah cetakan buat bikin banyak object yang bentuknya sama. Di dalam class kamu tulis data apa yang dimiliki tiap object dan method apa yang bisa dia jalankan, lalu object-nya dibuat pakai new. Di balik layar class tetap memakai prototype dari materi sebelumnya, cuma cara menulisnya lebih ringkas.
🧪 Tebakan cepat:
adanbdibuat dari class yang sama. Kalaua.namediubah, apab.nameikut berubah? Tebak dulu, jawabannya ada di bagian "Cetakan denganclass".
Cetakan dengan class
class Animal {
constructor(name, sound) {
this.name = name
this.sound = sound
}
speak() {
return `${this.name}: ${this.sound}!`
}
}
const a = new Animal('Sapi', 'Mooo')
const b = new Animal('Bebek', 'Kwek')
console.log(a.speak()) // Sapi: Mooo!
console.log(b.speak()) // Bebek: Kwek!
class Animal { ... }mendefinisikan cetakannya. Nama class biasanya diawali huruf besar.constructor(name, sound)adalah method khusus yang jalan otomatis tiap kalinew Animal(...)dipanggil. Tugasnya menyimpan data ke object baru lewatthis, misalnyathis.name = name.speak() { ... }adalah method, ditulis langsung di dalam class tanpa katafunction. Di dalamnya,thisadalah object yang memanggil:a.speak()membaca dataa,b.speak()membaca datab.new Animal('Sapi', 'Mooo')bikin satu object baru, disebut instance. Class gak bisa dipanggil tanpanew:Animal('Sapi', 'Mooo')melemparTypeError.
Jawaban tebakan: gak. Tiap instance punya data sendiri. Yang dipakai bareng cuma method-nya, yang tinggal di Animal.prototype.
Pakai class di dalam fungsi
class PersegiPanjang {
constructor(panjang, lebar) {
this.panjang = panjang
this.lebar = lebar
}
keliling() {
return 2 * (this.panjang + this.lebar)
}
}
function hitungKeliling(panjang, lebar) {
const kotak = new PersegiPanjang(panjang, lebar)
return kotak.keliling()
}
hitungKeliling(4, 2) // 12
- Fungsi
hitungKelilingmembuat instance dengannew, memanggil method-nya, lalu me-returnhasilnya. Ada duareturn: satu di method, satu di fungsi. Lupa salah satunya, hasilnyaundefined. - Method membaca data lewat
this.panjang, bukanpanjangsaja. Parameterconstructorcuma ada di dalamconstructor, jadi simpan dulu kethisbiar method lain bisa membacanya.
Mewarisi dengan extends dan super
class Cat extends Animal {
constructor(name, color) {
super(name, 'Meong')
this.color = color
}
}
const milo = new Cat('Milo', 'oranye')
milo.speak() // 'Milo: Meong!'
milo instanceof Cat // true
milo instanceof Animal // true
extends AnimalbikinCatmewarisi semua yang dimilikiAnimal, termasukspeak().super(name, 'Meong')menjalankanconstructormilikAnimal. Di subclass,thisbaru ada sesudahsuper()jalan, jadi panggilsuper()di baris pertama. Menulisthis.colorsebelumsuper()melemparReferenceError.instanceofmengecek rantai prototype.miloadalahCat, dan karenaCat extends Animal, dia jugaAnimal.
Method static
class Suhu {
static keFahrenheit(celsius) {
return celsius * 9 / 5 + 32
}
}
Suhu.keFahrenheit(100) // 212
static bikin method milik class itu sendiri, bukan milik tiap instance. Dipanggil lewat nama class, Suhu.keFahrenheit(100), bukan lewat object hasil new. Cocok buat fungsi bantu yang gak butuh data instance.
⚠️ Jebakan yang sering ketemu
- Koma di antara method. Di object literal pakai koma, di class gak:
speak() {}, run() {}di dalam class bikinSyntaxError. - Method yang dilepas dari object-nya.
const f = a.speaklaluf()kehilanganthis, jadi error. Panggil langsunga.speak(), atau ikat dulu:a.speak.bind(a). - Lupa
returndi method. Method yang cuma menghitung tanpareturnmemberiundefinedke pemanggilnya.
TL;DR: class adalah cetakan object. constructor jalan otomatis waktu new dan menyimpan data lewat this, method ditulis tanpa function dan membaca data lewat this. Tiap instance punya data sendiri, method-nya dipakai bareng. extends mewarisi class lain, super() dipanggil pertama di constructor subclass, dan instanceof mengecek rantainya. Method static dipanggil lewat nama class.
