Prototype Chain

Di chapter sebelumnya kita membuktikan pencarian properti bisa melompat satu tingkat: blender tidak punya sapa, sehingga engine bertanya ke dasarAlat. Pertanyaan yang wajar muncul sekarang — dan pernah dialami Siti saat menata data pesanan kafenya — adalah: kalau object di tingkat atas pun tidak punya propertinya, apakah engine berhenti, terus mencari, atau malah menimbulkan galat?

Jawabannya adalah mekanisme bernama prototype chain: tautan [[Prototype]] membentuk rantai, dan pencarian properti menyusurinya sampai properti ditemukan atau rantai benar-benar tamat. Chapter ini menelusuri rantai itu tingkat demi tingkat, lalu membandingkan dua operator yang sering tertukar saat memeriksa properti: in dan hasOwnProperty.

Alur Pencarian Properti #

Aturannya satu kalimat: ketika membaca objek.properti, engine memeriksa objek sendiri dulu; bila tidak ditemukan, engine naik ke [[Prototype]]-nya, lalu ke [[Prototype]] berikutnya, dan seterusnya sampai rantai mencapai null.

Ujung rantai selalu sama untuk object biasa: Object.prototype, lalu null. Ketika pencarian tiba di null, engine berhenti dan melaporkan hasilnya sebagai undefined — bukan galat. Inilah alasan membaca properti yang tidak ada di mana pun tidak membuat program berhenti; yang datang kembali hanyalah undefined.

Alur lengkapnya untuk pencarian pesanan.kurir terlihat seperti ini:

Diagram itu pula yang menjelaskan temuan chapter lalu: toString ditemukan di Object.prototype, dua tingkat di atas object kecil seperti produk. Semakin jauh properti berada di rantai, semakin banyak tingkat yang harus disusuri — detail performa yang jarang terasa, tetapi baik dipahami sejak awal.

Aturan “berhenti di null” punya dua wajah yang perlu dibedakan. Wajah pertama ramah: membaca properti yang tidak ada di mana pun menghasilkan undefined, dan program berlanjut seperti biasa. Wajah kedua muncul satu baris kemudian, ketika undefined itu kita pakai seperti object — misalnya membaca properti darinya. Kesalahan tunggal di data berubah menjadi TypeError di baris pemakaian:

const pesanan = {};
try {
  console.log(pesanan.kurir.panjang);
} catch (err) {
  console.log(`${err.name}: ${err.message}`);
}
console.log("Program tetap berjalan");

Output yang Dihasilkan:

TypeError: Cannot read properties of undefined (reading 'panjang')
Program tetap berjalan

Pesan galat itu sudah kita kenal dari section Error Handling, dan kini pemicunya bisa kita baca dengan kerangka prototype chain: pencarian kurir tiba di null, hasilnya undefined, lalu .panjang mencoba dibaca dari undefined yang memang tidak bisa menampung apa pun. Karena try...catch menangkapnya, program tetap mencetak baris terakhir — kegagalan satu jalur tidak meruntuhkan semuanya.

Menelusuri Rantai dalam Satu Berkas #

Berkas berikut merakit rantai dua tingkat — pesanan di ujung bawah, dasarPesanan di tengah, Object.prototype di puncak — lalu membaca berbagai properti untuk melihat hasil pencarian di tiap tingkat:

// jejak-pencarian.js
// Membaca properti = menelusuri rantai prototype sampai ketemu atau berhenti di null.

const dasarPesanan = {
  ringkas() {
    return `${this.nomor}: ${this.item} x${this.jumlah}`;
  },
};

const pesanan = Object.create(dasarPesanan);
pesanan.nomor = "P-101";
pesanan.item = "Kopi Susu";
pesanan.jumlah = 2;

console.log(pesanan.nomor);
console.log(pesanan.ringkas());
console.log(pesanan.valueOf);
console.log(pesanan.kurir);

console.log(Object.getPrototypeOf(pesanan) === dasarPesanan);
console.log(Object.getPrototypeOf(dasarPesanan) === Object.prototype);
console.log(Object.getPrototypeOf(Object.prototype) === null);

console.log("nomor" in pesanan);
console.log("ringkas" in pesanan);
console.log("kurir" in pesanan);

console.log(pesanan.hasOwnProperty("nomor"));
console.log(pesanan.hasOwnProperty("ringkas"));
console.log(Object.hasOwn(pesanan, "nomor"));

for (const kunci in pesanan) {
  console.log(kunci);
}

Output yang Dihasilkan:

P-101
P-101: Kopi Susu x2
[Function: valueOf]
undefined
true
true
true
true
true
false
true
false
true
nomor
item
jumlah
ringkas

Mari kita baca baris demi baris:

1. Baris 4–8 (dasarPesanan): object tengah rantai dengan satu method ringkas. Method ini membaca this.nomor dan kawan-kawannya — nilai yang kelak diambil dari pesanan di bawahnya.
2. Baris 10–13 (Object.create + tiga penugasan): pesanan dibuat dengan [[Prototype]] menunjuk ke dasarPesanan, lalu menerima tiga properti sendiri.
3. Baris 15 (pesanan.nomor): properti sendiri — pencarian selesai di tingkat pertama.
4. Baris 16 (pesanan.ringkas()): method tidak ada di pesanan, ditemukan satu tingkat di atas, dan berjalan dengan this menunjuk ke pesanan sehingga mencetak data pesanan.
5. Baris 17 (pesanan.valueOf): tidak ada di pesanan dan tidak ada di dasarPesanan; baru di Object.prototype function valueOf ditemukan — bukti pencarian dua tingkat sekaligus.
6. Baris 18 (pesanan.kurir): tidak ada di seluruh rantai; pencarian mencapai null dan hasilnya undefined, tanpa galat apa pun.
7. Baris 20–22 (tiga getPrototypeOf): rantainya terbaca satu per satu — pesanan menunjuk dasarPesanan, dasarPesanan menunjuk Object.prototype, dan Object.prototype menunjuk null. Titik null itulah akhir dari semua rantai.
8. Baris 24–26 (operator in): in memeriksa seluruh rantai, sehingga nomor dan ringkas menjawab true, sedangkan kurir menjawab false.
9. Baris 28–29 (hasOwnProperty): pemeriksaan ini hanya menyentuh object itu sendiri — nomor adalah milik pesanan (true), sedangkan ringkas yang berada satu tingkat di atas dilaporkan false.
10. Baris 30 (Object.hasOwn): versi modern dengan perilaku sama seperti hasOwnProperty, direkomendasikan untuk kode baru.
11. Baris 32–34 (for...in): loop ini menelusuri rantai dan menghitung semua kunci yang dapat dihitung — tiga properti sendiri ditambah ringkas dari prototype. Method bawaan seperti valueOf tidak ikut karena tidak dapat dihitung.

in, hasOwnProperty, dan Object.hasOwn #

Tiga alat pemeriksaan itu menjawab pertanyaan yang berbeda, dan perbedaannya persis mengikuti jangkauan pencariannya:

Aturan memilihnya sederhana. Untuk memastikan data milik object itu sendiri — misalnya membedakan pesanan yang benar-benar membawa resi dari pesanan yang hanya mewarisinya — gunakan Object.hasOwn. Untuk kebutuhan “apakah bisa dipakai”, termasuk method warisan, operator in lebih pas.

Satu Pengecualian: Object Tanpa Prototype #

Perintah Object.create yang kita pakai sepanjang chapter ini sebenarnya bisa menerima satu nilai khusus: null. Hasilnya object yang rantainya benar-benar kosong — tidak ada Object.prototype, tidak ada toString, tidak ada apa pun di atasnya:

const tasKunci = Object.create(null);
tasKunci.dari = "Siti";
console.log(Object.getPrototypeOf(tasKunci));
console.log(tasKunci.toString);

Output yang Dihasilkan:

null
undefined

Object seperti ini disebut prototype-less dan berguna sebagai tas kunci-nilai murni: pencarian properti tidak akan pernah terbawa ke method bawaan, dan data yang kita simpan tidak bisa bertabrakan dengan nama method seperti toString. Akses data juga sedikit lebih cepat karena rantainya pendek. Sisi lainnya wajar diikuti: tanpa prototype, object kehilangan semua kemampuan bawaan — tasKunci.toString adalah undefined nyata, dan memanggilnya akan gagal.

Rantai prototype menjelaskan dari mana method warisan datang, tetapi cara kita merakit object berantai selama ini masih manual lewat Object.create. Chapter berikutnya memperkenalkan pola yang jauh lebih umum di kode nyata: constructor function, yang memanggil new dan menautkan prototype secara otomatis.

// jejak-pencarian.js
// Membaca properti = menelusuri rantai prototype sampai ketemu atau berhenti di null.

const dasarPesanan = {
  ringkas() {
    return `${this.nomor}: ${this.item} x${this.jumlah}`;
  },
};

const pesanan = Object.create(dasarPesanan);
pesanan.nomor = "P-101";
pesanan.item = "Kopi Susu";
pesanan.jumlah = 2;

console.log(pesanan.nomor);
console.log(pesanan.ringkas());
console.log(pesanan.valueOf);
console.log(pesanan.kurir);

console.log(Object.getPrototypeOf(pesanan) === dasarPesanan);
console.log(Object.getPrototypeOf(dasarPesanan) === Object.prototype);
console.log(Object.getPrototypeOf(Object.prototype) === null);

console.log("nomor" in pesanan);
console.log("ringkas" in pesanan);
console.log("kurir" in pesanan);

console.log(pesanan.hasOwnProperty("nomor"));
console.log(pesanan.hasOwnProperty("ringkas"));
console.log(Object.hasOwn(pesanan, "nomor"));

for (const kunci in pesanan) {
  console.log(kunci);
}