Pelajari Cara Membuat Kelas di JavaScript

Pada tahun 2015, versi ES6 dari bahasa pemrograman JavaScript dirilis. Rilis ini memperkenalkan beberapa peningkatan besar pada bahasa tersebut, dan secara resmi menempatkannya dalam kategori bahasa pemrograman berorientasi objek di antara bahasa lain seperti Java dan C++.

Pemrograman berorientasi objek berfokus pada objek dan operasi yang dapat dilakukan pada objek tersebut. Namun, sebelum Anda dapat memiliki objek apa pun, Anda harus memiliki kelas.

Kelas JavaScript adalah salah satu fitur pengubah permainan yang disertakan dengan versi bahasa ES6. Kelas dapat digambarkan sebagai cetak biru yang digunakan untuk membuat objek.

Dalam artikel tutorial ini, Anda akan belajar cara membuat dan memanipulasi objek menggunakan kelas JavaScript.

Struktur Kelas JavaScript

Saat membuat kelas di JavaScript, ada satu komponen dasar yang selalu Anda perlukan— kelas kata kunci. Hampir setiap aspek lain dari kelas JavaScript tidak diperlukan untuk keberhasilan eksekusinya.

Kelas JavaScript akan dieksekusi secara alami jika konstruktor tidak disediakan (kelas hanya akan membuat konstruktor kosong selama eksekusi). Namun, jika kelas JavaScript dibuat dengan konstruktor dan fungsi lain tetapi tidak ada kata kunci kelas yang digunakan, kelas ini tidak akan dapat dieksekusi.

NS kelas kata kunci (yang harus selalu dalam huruf kecil) adalah kebutuhan dalam struktur kelas JavaScript. Contoh berikut adalah sintaks umum kelas JavaScript. Sintaks kelas JavaScript di bawah ini:

kelas NamaKelas{
//tubuh kelas
}

Membuat Kelas di JavaScript

Dalam pemrograman, kelas dapat dilihat sebagai entitas umum yang digunakan untuk membuat objek khusus. Misalnya, di lingkungan sekolah, entitas umum (kelas) dapat berupa siswa dan objek siswa dapat berupa John Brown. Tetapi sebelum Anda membuat objek, Anda harus mengetahui data yang akan disimpannya dan di sinilah Konstruktor JavaScript berperan.

Menggunakan Konstruktor di Kelas JavaScript

Konstruktor sangat penting untuk proses pembuatan kelas karena beberapa alasan; itu menginisialisasi keadaan suatu objek (melalui atributnya) dan itu dipanggil secara otomatis ketika objek baru dipakai (didefinisikan dan dibuat).

Menggunakan Contoh Konstruktor

Di bawah ini, Anda akan melihat contoh konstruktor dengan penjelasan tentang artinya.

siswa kelas{
konstruktor (nama depan, nama belakang, tanggal mulai){
this.namadepan = namadepan;
this.namabelakang = namabelakang;
this.startDate = tanggal mulai;
}
}

Kode di atas menyajikan aspek penting dari konstruktor kelas JavaScript; tidak seperti bahasa lain seperti Java dan C++, konstruktor JavaScript tidak menggunakan nama kelas untuk membuat konstruktor. Ini menggunakan konstruktor kata kunci seperti yang Anda lihat pada contoh di atas.

Terkait: Pelajari Cara Membuat Kelas di Java

NS konstruktor pada contoh di atas mengambil tiga parameter dan menggunakan ini kata kunci untuk menetapkan parameter ke instance kelas saat ini. Ini mungkin tampak sedikit membingungkan, tetapi yang perlu Anda pahami adalah bahwa kelas dapat dilihat sebagai cetak biru yang digunakan untuk membuat banyak rumah.

Setiap rumah yang dibangun kemudian dapat dilihat sebagai objek dari kelas ini. Meskipun masing-masing rumah ini dibuat dengan cetak biru yang sama, mereka dapat dibedakan berdasarkan lokasi geografis tertentu atau orang yang memilikinya.

NS ini kata kunci digunakan untuk membedakan setiap objek yang dibuat oleh suatu kelas. Ini memastikan bahwa data yang benar disimpan dan diproses untuk setiap objek yang dibuat menggunakan kelas yang sama.

Membuat Objek di JavaScript

Konstruktor penting dalam bahasa seperti JavaScript karena mereka menandakan jumlah atribut yang harus dimiliki oleh objek dari kelas tertentu. Beberapa bahasa akan mengharuskan atribut (variabel) dideklarasikan sebelum dapat digunakan dalam konstruktor atau metode lainnya. Namun, tidak demikian halnya dengan JavaScript.

Terkait: Cara Mendeklarasikan Variabel dalam JavaScript

Melihat konstruktor kelas siswa di atas, Anda dapat melihat bahwa objek dari kelas ini akan memiliki tiga atribut.

Membuat Contoh Objek

Di bawah ini, Anda akan melihat contoh untuk membuat objek di JavaScript.

//buat objek baru
const john = Siswa baru('John', 'Coklat', '2018');

Kode di atas menggunakan Siswa kelas untuk membuat objek.

Saat membuat objek kelas, Anda perlu menggunakan baru kata kunci, diikuti dengan nama kelas dan nilai yang ingin Anda tetapkan ke masing-masing atribut. Sekarang Anda memiliki siswa baru dengan nama depan John, nama belakang Brown, dan tanggal mulai 2018. Anda juga memiliki variabel konstan: john. Variabel ini penting karena memungkinkan Anda untuk menggunakan objek yang dibuat.

Tanpa john variabel Anda masih dapat membuat objek baru menggunakan Siswa kelas, tetapi kemudian tidak akan ada cara untuk mengakses objek ini dan menggunakannya dengan metode kelas yang berbeda.

Menggunakan Metode di Kelas JavaScript

Metode adalah fungsi dari kelas yang digunakan untuk melakukan operasi pada objek yang dibuat dari kelas tersebut. Metode yang baik untuk menambah kelas siswa adalah metode yang menghasilkan laporan tentang setiap siswa.

Contoh Membuat Metode Kelas

Di bawah ini adalah contoh untuk membuat metode kelas dalam JavaScript.

siswa kelas{
konstruktor (nama depan, nama belakang, tanggal mulai){
this.namadepan = namadepan;
this.namabelakang = namabelakang;
this.startDate = tanggal mulai;
}
// metode laporan
laporan(){
return `${this.firstName} ${this.lastName} mulai menghadiri institusi ini pada ${this.startDate}`
}
}

Kelas di atas berisi metode yang akan menghasilkan laporan pada setiap siswa yang dibuat dengan Siswa kelas. Untuk menggunakan laporan() metode Anda perlu menggunakan objek kelas yang ada untuk membuat panggilan fungsi sederhana.

Berkat "buat contoh objek" di atas, Anda harus memiliki objek dari Siswa kelas yang ditugaskan ke variabel john. Menggunakan john, Anda sekarang dapat berhasil memanggil laporan() metode.

Menggunakan Contoh Metode Kelas

Di bawah ini adalah contoh penggunaan metode kelas dalam JavaScript.

//buat objek baru
const john = Siswa baru('John', 'Coklat', '2018');
//memanggil metode laporan dan menyimpan hasilnya dalam variabel
biarkan hasil = john.report();
//mencetak hasilnya ke konsol
console.log (hasil);

Kode di atas menggunakan Siswa class untuk menghasilkan output berikut di konsol:

John Brown mulai menghadiri institusi ini pada tahun 2018

Menggunakan Metode Statis di Kelas JavaScript

Metode statis unik karena merupakan satu-satunya metode dalam kelas JavaScript yang dapat digunakan tanpa objek.

Dari contoh di atas, Anda tidak dapat menggunakan laporan() metode tanpa objek kelas. Ini karena laporan() metode bergantung pada atribut suatu objek untuk menghasilkan hasil yang diinginkan. Namun, untuk menggunakan metode statis, Anda hanya memerlukan nama kelas yang menyimpan metode tersebut.

Membuat Contoh Metode Statis

Di bawah ini adalah contoh metode statis untuk JavaScript.

siswa kelas{
konstruktor (nama depan, nama belakang, tanggal mulai){
this.namadepan = namadepan;
this.namabelakang = namabelakang;
this.startDate = tanggal mulai;
}
// metode laporan
laporan(){
return `${this.firstName} ${this.lastName} mulai menghadiri institusi ini pada ${this.startDate}`
}
//metode statis
tanggal akhir statis (tanggal mulai){
kembali tanggal mulai + 4;
}
}

Hal penting yang perlu diperhatikan dari contoh di atas adalah bahwa setiap metode statis dimulai dengan statis kata kunci.

Menggunakan Contoh Metode Statis

Di bawah ini adalah contoh untuk menggunakan metode statis dalam JavaScript.

//memanggil metode statis dan mencetak hasilnya ke konsol
console.log (Student.endDate (2018));

Baris kode di atas menggunakan Siswa class untuk menghasilkan output berikut di konsol:

2022

Membuat Kelas JavaScript itu Mudah

Ada beberapa hal yang perlu Anda ingat jika Anda ingin membuat kelas JavaScript dan membuat instance satu atau lebih objek darinya:

• Kelas JavaScript harus memiliki kelas kata kunci.
• Konstruktor JavaScript menunjukkan jumlah nilai yang dapat dimiliki suatu objek.
• Metode kelas umum tidak dapat digunakan tanpa objek.
• Metode statis dapat digunakan tanpa objek.

NS menghibur.catatan() metode digunakan di seluruh artikel ini untuk memberikan hasil penggunaan metode umum dan statis di kelas JavaScript. Metode ini adalah alat yang berguna untuk setiap pengembang JavaScript karena membantu dalam proses debugging.

Membiasakan diri dengan konsol.log() metode adalah salah satu hal terpenting yang dapat Anda lakukan sebagai pengembang JavaScript.

Lembar Cheat JavaScript Ultimate

Dapatkan penyegaran cepat pada elemen JavaScript dengan lembar contekan ini.

Baca Selanjutnya

Tentang Penulis