Prototype JavaScript: Rantai di Balik Setiap Object

Setiap object punya prototype

JavaScript adalah bahasa berbasis prototype. Kedengarannya eksotis, tapi idenya sederhana: setiap object punya tautan rahasia ke object lain, yaitu prototype-nya, dan saat kamu meminta property yang tidak dimiliki object itu, JavaScript mengikuti tautan itu dan mencarinya di sana.

const animal = { eats: true };
const rabbit = { jumps: true };

Object.setPrototypeOf(rabbit, animal);

console.log(rabbit.jumps);
console.log(rabbit.eats);
console.log(rabbit.flies);

rabbit tidak punya property eats miliknya sendiri. JavaScript mengecek rabbit, tidak menemukannya, mengikuti tautan prototype ke animal, menemukan eats: true, lalu mengembalikannya. Untuk flies, ia menelusuri rantainya, tidak menemukan apa-apa, dan mengembalikan undefined.

Perilaku cari-lalu-telusuri inilah seluruh mekanismenya. Pewarisan, method, class, semuanya dibangun di atas ini.

Prototype chain

Rantainya tidak berhenti di satu langkah. Sebuah prototype bisa punya prototype sendiri, dan seterusnya, sampai kamu bertemu null:

const rabbit = { jumps: true };

let current = rabbit;
while (current) {
    console.log(current);
    current = Object.getPrototypeOf(current);
}

Jalankan, dan kamu akan melihat rabbit, lalu Object.prototype, lalu null. Itulah kenapa rabbit.toString() berfungsi walaupun kamu tidak pernah mendefinisikan toString: ia tinggal di Object.prototype, puncak dari hampir setiap rantai.

Pencarian property menelusuri rantai ini dari bawah ke atas. Sebaliknya, assignment selalu menulis ke object itu sendiri; ia tidak pernah naik ke atas. Ketidaksimetrisan ini penting dan sering mengejutkan orang.

Constructor function dan .prototype

Sebelum class ada, cara standar membuat banyak object yang mirip adalah constructor function yang dipanggil dengan new:

function User(name) {
    this.name = name;
}

User.prototype.greet = function () {
    return `Hi, I'm ${this.name}`;
};

const ada = new User("Ada");
const boris = new User("Boris");

console.log(ada.greet());
console.log(boris.greet());
console.log(ada.greet === boris.greet);

Dua hal terjadi saat kamu memanggil new User("Ada"):

1. Object baru dibuat, dengan prototype-nya diatur ke User.prototype.
2. User dijalankan dengan this terikat ke object baru itu.

greet tidak disalin ke setiap instance. Ia tinggal satu kali di User.prototype, dan ada maupun boris menemukannya dengan menelusuri rantai mereka. Itulah kenapa baris terakhir mencetak true: keduanya benar-benar fungsi yang sama.

prototype vs __proto__

Dua nama ini menjebak semua orang. Keduanya berhubungan, tapi bukan hal yang sama.

• User.prototype adalah property pada constructor function. Ia adalah object yang menjadi prototype bagi instance yang dibuat dengan new User(...).
• ada.__proto__ (atau Object.getPrototypeOf(ada)) adalah tautan pada instance yang menunjuk ke atas, ke prototype-nya.

function User(name) {
    this.name = name;
}

const ada = new User("Ada");

console.log(Object.getPrototypeOf(ada) === User.prototype);
console.log(ada.__proto__ === User.prototype);
console.log(User.prototype.constructor === User);

Utamakan Object.getPrototypeOf(obj) daripada obj.__proto__ di kode baru. __proto__ adalah accessor lama yang dipertahankan demi kompatibilitas; fungsi itulah API resminya.

Class adalah sugar di atas semua ini

JavaScript modern membolehkanmu menulis class, tapi di baliknya kamu tetap berurusan dengan prototype. Bandingkan kedua versinya berdampingan:

class User {
    constructor(name) {
        this.name = name;
    }
    greet() {
        return `Hi, I'm ${this.name}`;
    }
}

const ada = new User("Ada");

console.log(ada.greet());
console.log(Object.getPrototypeOf(ada) === User.prototype);
console.log(typeof User.prototype.greet);

greet berakhir di User.prototype, sama seperti kalau kamu menulisnya sendiri. Kata kunci class sebagian besar memberimu sintaks yang lebih rapi, aturan yang lebih ketat (kamu wajib memakai new), dan cara yang lebih bersih untuk extends, tapi model runtime-nya identik.

Mengetahui ini penting saat kamu membaca pesan error atau men-debug this. Error tentang "User.prototype.greet" bukan nama internal yang aneh: itulah tepatnya tempat method itu tinggal.

Pewarisan hanyalah rantai yang lebih panjang

extends merangkai satu prototype ke prototype lain. Prototype milik induk menjadi prototype dari prototype milik anaknya:

class Animal {
    constructor(name) { this.name = name; }
    eat() { return `${this.name} is eating`; }
}

class Dog extends Animal {
    bark() { return `${this.name} says woof`; }
}

const rex = new Dog("Rex");

console.log(rex.bark());
console.log(rex.eat());

console.log(Object.getPrototypeOf(rex) === Dog.prototype);
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype);

Mencari rex.eat menelusuri rex → Dog.prototype → Animal.prototype, menemukan eat di sana, lalu memanggilnya dengan this tetap terikat ke rex. Hanya itulah yang dilakukan extends: ia menyiapkan rantainya untukmu.

Membuat object langsung dengan sebuah prototype

Kamu sama sekali tidak butuh constructor. Object.create(proto) membuat object baru dengan prototype yang kamu tentukan:

const speaker = {
    greet() {
        return `Hello from ${this.name}`;
    },
};

const ada = Object.create(speaker);
ada.name = "Ada";

const boris = Object.create(speaker);
boris.name = "Boris";

console.log(ada.greet());
console.log(boris.greet());
console.log(Object.getPrototypeOf(ada) === speaker);

Tanpa class, tanpa new, tanpa constructor function. Dua object berbagi satu method lewat prototype yang sama. Inilah bentuk paling dasar dari pewarisan prototype; semua yang lain dibangun di atasnya.

hasOwnProperty: milik sendiri vs diwariskan

Karena pencarian menelusuri rantai, "foo" in obj juga mengembalikan true untuk property yang diwariskan. Saat kamu perlu membedakan property yang benar-benar dimiliki object itu, pakai Object.hasOwn (atau hasOwnProperty yang lebih lama):

class User {
    constructor(name) { this.name = name; }
    greet() { return `Hi, ${this.name}`; }
}

const ada = new User("Ada");

console.log("name" in ada);
console.log("greet" in ada);

console.log(Object.hasOwn(ada, "name"));
console.log(Object.hasOwn(ada, "greet"));

name ada di instance. greet ada di prototype. in menemukan keduanya; Object.hasOwn hanya menemukan yang pertama. Ini penting setiap kali kamu melakukan perulangan dengan for...in atau melakukan serialisasi object: biasanya kamu hanya menginginkan property milik sendiri.

Jangan monkey-patch prototype bawaan

Karena Array.prototype dipakai bersama oleh setiap array di programmu, kamu bisa saja menambahkan method ke dalamnya:

// Please don't.
Array.prototype.last = function () {
    return this[this.length - 1];
};

[1, 2, 3].last(); // 3

Masalahnya bukan karena ini tidak berfungsi; ini berfungsi. Masalahnya, setiap library, setiap dependency, dan setiap versi JavaScript di masa depan kini berbagi namespace itu denganmu. Saat Array.prototype.last akhirnya hadir sebagai method resmi dengan perilaku yang sedikit berbeda, kodemu (atau kode orang lain) rusak dengan cara yang halus. Kisah Array.prototype.flatten / Array.prototype.flat adalah contoh peringatan yang paling terkenal.

Simpan helper sebagai fungsi yang berdiri sendiri:

const last = (arr) => arr[arr.length - 1];

console.log(last([1, 2, 3]));

Satu permukaan bersama lebih sedikit yang bisa bertabrakan.

Cara memikirkannya

Lepaskan semua hal lain, dan prototype bermuara pada tiga aturan:

• Setiap object punya tautan prototype (bisa jadi null).
• Pembacaan property menelusuri rantai itu ke atas; penulisan tidak.
• class, new, dan extends adalah cara menyiapkan rantai itu tanpa harus mengetik Object.create sendiri.

Ingat tiga hal itu, dan perilaku this, instanceof, resolusi method, serta pewarisan akan jadi masuk akal dengan sendirinya.

Berikutnya: event loop

Prototype menutup pembahasan model object. Bab berikutnya beralih ke sesuatu yang sama sekali berbeda: bagaimana JavaScript sebenarnya menjalankan kodemu dari waktu ke waktu. Event loop adalah yang membuat timer, promise, dan async/await berperilaku seperti itu, dan ia menjadi fondasi untuk semua hal async.