Panduan Pemula untuk Kelas JavaScript
Hai teman-teman, sang pelajar JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia kelas-kelas JavaScript. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya – saya akan menjadi panduan ramah Anda, dan kita akan bergerak langkah demi langkah. Pada akhir panduan ini, Anda akan dapat membuat kelas Anda sendiri seperti seorang ahli!
Apa Itu Kelas JavaScript?
Bayangkan Anda sedang membangun sebuah kebun binatang virtual. Anda tentu tidak mau menggambarkan setiap hewan secara individual, kan? Itulah tempat kelas-kelas berguna. Sebuah kelas adalah seperti blueprint untuk membuat objek. Itu menentukan properti dan perilaku yang semua objek jenis itu harus memiliki.
Mari kita mulai dengan contoh sederhana:
class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}
makeSound() {
console.log("The animal makes a sound");
}
}
Dalam contoh ini, Animal
adalah kelas kita. Itu seperti mengatakan, "Setiap hewan di kebun binatang kita akan memiliki nama, jenis, dan kemampuan untuk membuat suara."
Mendefinisikan Kelas JavaScript
Untuk mendefinisikan kelas di JavaScript, kita gunakan kata kunci class
diikuti dengan nama kelas. Nama kelas biasanya dimulai dengan huruf besar – itu bukan wajib, tapi itu adalah konvensi umum yang membantu membedakan kelas dari jenis kode lain.
Metode constructor()
Metode constructor()
adalah metode khusus untuk membuat dan menginisialisasi objek yang dibuat dengan kelas. Itu dipanggil secara otomatis saat kita membuat objek baru dari kelas ini.
class Book {
constructor(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}
}
Di sini, title
, author
, dan year
adalah properti yang setiap objek Book
akan memiliki. Kata kunci this
merujuk ke objek yang sedang diciptakan.
Membuat Objek JavaScript
Sekarang kita memiliki kelas kita, mari kita buat beberapa objek!
let myBook = new Book("The Great Gatsby", "F. Scott Fitzgerald", 1925);
console.log(myBook.title); // Keluaran: The Great Gatsby
Kata kunci new
digunakan untuk membuat instance baru dari kelas Book
. Itu seperti mengatakan, "Hey JavaScript, tolong buatkan saya buku baru menggunakan blueprint ini!"
Metode Kelas JavaScript
Metode adalah fungsi yang milik kelas. Mereka menentukan perilaku yang objek kelas dapat melaksanakan.
class Dog {
constructor(name) {
this.name = name;
}
bark() {
console.log(`${this.name} says: Woof woof!`);
}
fetch(item) {
console.log(`${this.name} fetches the ${item}`);
}
}
let myDog = new Dog("Buddy");
myDog.bark(); // Keluaran: Buddy says: Woof woof!
myDog.fetch("ball"); // Keluaran: Buddy fetches the ball
Dalam contoh ini, bark()
dan fetch()
adalah metode kelas Dog
. Setiap objek Dog
yang kita buat akan memiliki kemampuan ini.
Jenis Kelas JavaScript
JavaScript mendukung dua jenis utama kelas:
-
Deklarasi: Ini adalah apa yang kita gunakan sejauh ini.
class Rectangle { // body kelas }
-
Ekspresi: Kelas juga dapat didefinisikan dalam ekspresi.
let Rectangle = class { // body kelas };
Kedua-duanya mencapai hasil yang sama, tapi deklarasi kelas lebih umum dan mudah dibaca.
Hoisting Kelas JavaScript
Tidak seperti deklarasi fungsi, deklarasi kelas tidak dihoist. Ini berarti Anda tidak dapat menggunakan kelas sebelum itu didefinisikan dalam kode Anda.
// Ini akan melempar kesalahan
let p = new Rectangle(); // ReferenceError
class Rectangle {}
Selalu definisikan kelas Anda sebelum Anda menggunakannya!
Mode Ketat dengan Kelas
Ini adalah fakta menarik: tubuh kelas selalu dieksekusi dalam mode ketat. Apa artinya ini? Well, itu seperti memiliki guru ketat yang tidak membiarkan Anda membuat kode kotor. Sebagai contoh:
class StrictClass {
method() {
undeclaredVariable = 5; // Ini akan melempar kesalahan
}
}
Dalam mode ketat, Anda harus mendeklarasikan variabel Anda sebelum menggunakannya. Itu membantu menangkap kesalahan pemrograman umum dan menjaga kode Anda bersih!
Tabel Metode Kelas
Ini adalah tabel praktis dari beberapa metode kelas umum:
Metode | Deskripsi |
---|---|
constructor() |
Menginisialisasi instance baru kelas |
static |
Mendefinisikan metode statis untuk kelas |
extends |
Membuat kelas sebagai anak dari kelas lain |
super |
Memanggil kontruktur kelas induk |
get |
Mendefinisikan metode pengambil |
set |
Mendefinisikan metode pengatur |
Kesimpulan
Selamat! Anda baru saja mengambil langkah pertama ke dunia kelas-kelas JavaScript. Ingat, seperti belajar keterampilan baru, latihan membuat sempurna. Cobalah membuat kelas Anda sendiri – mungkin Car
kelas dengan metode seperti startEngine()
dan drive()
, atau Superhero
kelas dengan metode useSpecialPower()
.
Kelas-kelas adalah alat yang kuat di JavaScript, memungkinkan Anda menciptakan kode yang terorganisir dan dapat digunakan kembali. Mereka seperti blok Lego pemrograman – sederhana sendiri, tapi mampu membangun hal yang menakjubkan saat digabungkan.
Terus kode, terus belajar, dan sebelum Anda tahu, Anda akan dapat membuat aplikasi kompleks dengan mudah. Selamat belajar, para pengembang masa depan!
Credits: Image by storyset