JavaScript modern dengan ES6-ES13 (Tutorial JS)

Warisan di JavaScript: Dengan ES6 ke Kelas Modern

Semua video tutorial JavaScript modern dengan ES6-ES13 (Tutorial JS)

Pewarisan adalah konsep sentral dalam pemrograman berorientasi objek, yang memungkinkanmu untuk memperluas Kelas yang ada dan menggunakan properti serta metode mereka. JavaScript telah memperkenalkan sintaks pewarisan yang lebih baru dan lebih kuat dengan diperkenalkannya ES6, yang jauh lebih mudah untuk ditangani dibandingkan dengan metode Prototype yang asli. Dalam panduan ini, aku akan menunjukkan kepadamu cara menerapkan pewarisan dalam JavaScript menggunakan kata kunci extends, dan menjelaskan langkah demi langkah bagaimana cara memanggil konstruktor kelas dasar dengan super dengan benar.

Temuan Utama

  • Pewarisan dalam JavaScript dilakukan melalui kata kunci extends.
  • Konstruktor kelas dasar harus dipanggil dengan super.
  • Variabel instans dapat dirujuk menggunakan kata kunci this di dalam kelas turunan.

Panduan Langkah demi Langkah

Membuat Kelas Dasar

Untuk mulai dengan pewarisan, kita akan terlebih dahulu membuat kelas dasar bernama Shape. Dalam kelas ini, kita mendefinisikan konstruktor serta beberapa metode.

Di sini kamu mendefinisikan kelas Shape yang memiliki sebuah konstruktor. Kamu dapat mendefinisikan variabel dan fungsi dalam konstruktor ini, yang dapat diakses oleh kelas lain.

Pewarisan dalam JavaScript: Dengan ES6 menuju Kelas Modern

Meneliti Subkelas

Setelah membuat kelas dasar, kamu sekarang dapat membuat subkelas yang mewarisi dari Shape. Dalam contoh ini, kita akan menamakan kelas baru ini ConcreteShape.

Di dalam subkelas ini, kita menggunakan kata kunci extends untuk menunjukkan bahwa ConcreteShape mewarisi dari Shape. Konstruktor subkelas memanggil konstruktor kelas dasar Shape dengan super(), yang diperlukan untuk mengimplementasikan pewarisan dengan benar.

Mendapatkan Instans Subkelas

Sekarang, setelah kita membuat subkelas, saatnya untuk membuat sebuah instans dari kelas ini.

Di sini kamu membuat objek baru myShape dari kelas ConcreteShape dan memberikan deskripsi kepada konstruktor. Kemudian, kamu memanggil metode print yang akan mencetak deskripsi tersebut.

Menambahkan Properti Tambahan

Kamu dapat menambahkan properti tambahan atau bahkan metode yang spesifik untuk subkelas ini.

Di sini kamu telah memperluas kelas ConcreteShape dengan menambahkan parameter tambahan ke konstruktor.

Penggunaan Pewarisan

Dengan kata kunci super, kamu dapat memanggil metode describe dari kelas dasar untuk menggabungkan properti dari kelas dasar dan subkelas.

Ringkasan – Pewarisan dalam JavaScript: Dari ES6 ke ES13

Dalam tutorial ini, kamu telah belajar bagaimana pewarisan bekerja dalam JavaScript, terutama dengan sintaks class yang baru. Kamu telah melihat bagaimana cara mendefinisikan kelas, bagaimana cara mewarisi dari kelas dasar dan bagaimana cara memanggil konstruktor dengan benar. Mekanisme ini memudahkanmu untuk menjaga basis kode tetap bersih dan dapat dipelihara dengan cara yang efisien untuk menggunakan kembali fitur.

Pertanyaan yang Sering Diajukan

Apa perbedaan antara super() dan this?super() digunakan untuk memanggil konstruktor kelas dasar, sementara this mengacu pada instans kelas saat ini.

Mengapa penggunaan kelas Es6 lebih baik daripada prototipe?Kelas ES6 menawarkan sintaks yang lebih jelas dan intuitif yang membuat membaca dan memahami kode lebih mudah.

Bisakah saya memiliki beberapa kelas dasar?Tidak, JavaScript tidak mendukung pewarisan ganda. Sebuah kelas hanya dapat mewarisi dari satu kelas lainnya.

Apa yang terjadi jika saya tidak memanggil super()?Jika kamu tidak memanggil super(), kamu akan mendapatkan kesalahan, karena konstruktor kelas dasar, yang menginisialisasi apa yang diperlukan untuk kelas tersebut, tidak akan dijalankan.