BAB 24 — Prototype & Inheritance: Memahami Fondasi Object-Oriented JavaScript

BAB 24 — Prototype & Inheritance: Memahami Fondasi Object-Oriented JavaScript

Prototype adalah mekanisme inti JavaScript untuk inheritance dan berbagi perilaku antar objek. Memahami prototype chain membantu developer mengoptimalkan kode, debug, dan memahami class modern yang sebenarnya built di atas prototype.

1. Prototype Chain

  • Setiap objek di JavaScript memiliki prototype (internal [[Prototype]]) yang dapat diwarisi oleh objek lain.
  • Prototype chain → mekanisme pencarian properti: jika properti tidak ada di objek, JavaScript mencarinya di prototype.
const parent = { greet() { console.log("Hello"); } };
const child = Object.create(parent);
child.greet(); // Hello → inherited from parent

Insight:

  • Prototype chain memungkinkan code reuse tanpa menyalin method ke setiap objek.
  • Object.create() → cara membuat objek dengan prototype tertentu.

2. Constructor Function

  • Sebelum class ES6, JavaScript menggunakan constructor function untuk membuat objek.
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.greet = function() {
    console.log(`Hello, saya ${this.name}`);
};

const alice = new Person("Alice", 25);
alice.greet(); // Hello, saya Alice
  • Semua instance berbagi method di prototype → hemat memory.

Insight:

  • Constructor function + prototype → dasar class ES6.
  • Perlu dipanggil dengan new → membuat objek baru dan mengatur this.

3. proto vs prototype

PropertiDigunakan OlehPenjelasan
__proto__objek instancePointer ke prototype objek parent. Bisa diakses dari instance.
prototypeconstructor functionObjek yang akan menjadi [[Prototype]] untuk instance baru.

Contoh:

function Person(name) { this.name = name; }
Person.prototype.greet = function() { console.log(this.name); };

const bob = new Person("Bob");
console.log(bob.__proto__ === Person.prototype); // true

Insight:

  • prototype → milik constructor → mendefinisikan method untuk semua instance.
  • __proto__ → milik objek → menunjuk ke prototype parent.

4. Prototypes pada Built-in Object

  • Semua object built-in JavaScript menggunakan prototype untuk method reuse.
const arr = [1,2,3];
console.log(arr.__proto__ === Array.prototype); // true
console.log(arr.map); // ada di Array.prototype

const str = "hello";
console.log(str.__proto__ === String.prototype); // true
console.log(str.toUpperCase()); // HELLO

Insight:

  • Method seperti map, filter, toUpperCase → berasal dari prototype.
  • Memahami ini membantu debugging dan optimasi.

5. Dibandingkan dengan Class Modern

  • Class ES6 hanyalah syntactic sugar di atas prototype.

Constructor function:

function Person(name){
    this.name = name;
}
Person.prototype.greet = function(){ console.log(this.name); };

Class modern:

class Person {
    constructor(name) { this.name = name; }
    greet() { console.log(this.name); }
}
  • Hasilnya sama → method berada di prototype.
const alice = new Person("Alice");
console.log(alice.__proto__ === Person.prototype); // true

Insight:

  • Class modern → lebih mudah dibaca, tapi prototype chain tetap dipakai di belakang layar.
  • Semua konsep inheritance, method sharing, dan instance memory optimization sama.

6. Praktik Terbaik Prototype & Inheritance

  1. Gunakan class ES6 untuk readability dan maintainability.
  2. Pahami prototype chain untuk debugging property lookup.
  3. Gunakan constructor function jika perlu kompatibilitas lama.
  4. Jangan menambahkan method langsung ke objek instance → lebih hemat memory jika ditempatkan di prototype.
  5. Gunakan Object.create() untuk inheritance sederhana atau prototypal patterns.

7. Kesimpulan

  • Prototype → mekanisme utama inheritance di JavaScript.
  • Prototype chain → pencarian properti dari objek ke parent.
  • Constructor function + prototype → cara tradisional membuat objek reusable.
  • __proto__ → instance → menunjuk prototype, prototype → constructor → milik semua instance.
  • Class modern hanyalah sintaks lebih bersih untuk prototype-based inheritance.
  • Memahami prototype membantu debug, optimasi, dan integrasi OOP di JavaScript.

💡 Insight: Menguasai prototype chain adalah kunci memahami inheritance, class, built-in object, dan perilaku JavaScript di level fundamental.

Related Posts