JavaScript: Bahasanya · 10/12

Prototype dan class

Di dalamnya JavaScript tidak punya class — yang ada prototype chain. Class hanya cara penulisan yang lebih enak.

Baca 28 menit

Setelah pelajaran ini kamu bisa

Menjelaskan apa yang terjadi saat kamu membaca property yang tidak ada di sebuah object
Menulis class dengan constructor, method, dan field privat
Memakai `extends` dan tahu kapan sebaiknya tidak
Menjelaskan kenapa setiap object seolah punya `toString`

Di dalamnya JavaScript tidak punya class. Yang ada adalah object yang terhubung ke object lain. class adalah sintaks yang lebih ramah di atas mekanisme itu — perlu kamu tahu, karena mekanismenya muncul ke permukaan saat ada masalah.

Prototype chain

Setiap object punya tautan tersembunyi ke object lain, yaitu prototype-nya. Baca sebuah property yang tidak dimiliki object itu, dan JavaScript akan mengikuti tautan itu, lalu tautan berikutnya, sampai property-nya ditemukan atau tautannya habis. Jalur itu disebut prototype chain.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Ini juga sebabnya .map bekerja di setiap array tanpa perlu disalin ke masing-masingnya: ia hidup sekali di Array.prototype, dan setiap array tertaut padanya.

Class

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Method yang dideklarasikan di badan class hidup di prototype, dipakai bersama semua instance. Field yang ditugaskan di constructor hidup di masing-masing instance. Itu sebabnya seribu booking tidak masing-masing membawa salinan describe sendiri.

extends, dan kapan berhenti

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Buat class ValidationError yang meng-extend Error, menerima nama field dan sebuah message, mengatur name dengan benar, dan menyediakan field. Lempar satu, tangkap, lalu pastikan instanceof ValidationError dan instanceof Error keduanya true, dan error.field tetap ada.

Hasil yang diharapkan

true, true, dan nama field yang kamu kirim

Tampilkan contoh solusi

Coba dulu minimal sepuluh menit sebelum membuka ini. Bagian yang terasa susah itu justru yang mengajari kamu.

class ValidationError extends Error {
  constructor(field, message) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

try {
  throw new ValidationError("email", "Email is not valid");
} catch (error) {
  console.log(error instanceof ValidationError);
  console.log(error instanceof Error);
  console.log(error.field, "-", error.message);
}