JavaScript Prototyping: Nesnelerin Gizli DNA’sı 🧬

Ah, JavaScript objeleri…
Bazı günler onları sadece veri tutucu olarak görürsün, ama aslında her birinin gizli bir DNA’sı var: prototype zinciri. 😎

Bu yazıda:

• Objelerin nasıl çalıştığını
• Prototiplerin gizli süper güçlerini
• Constructor ve class mantığını
• Pratik ipuçları ve tuzakları
  öğrenecek, üstelik sıkıcı olmayacak şekilde eğleneceğiz.

1️⃣ Obje Nedir, Neden Bu Kadar Önemli? 🧐

JavaScript’te her şey obje olabilir:

• Veriler
• Fonksiyonlar
• Neredeyse her şey!

const person = {
  name: "Alice",
  age: 25,
  hobbies: ["coding", "coffee", "memes"]
};

console.log(person.name); // Alice
console.log(person.hobbies[2]); // memes

Açıklama Eğlenceli Tarzda:

• person.name → Alice’in adı
• person.hobbies → Alice’in gizli hobileri
• JS objeleri hem veri hem davranış barındırabilir.

💡 İpucu: Objeler, veriyi ve davranışı bir arada tutmak için birebirdir.
Matriks filmindeki Morpheus gibi: “Objeler sana veri veya metod sunar, seç senin kafana göre.” 😆

2️⃣ Prototype: Objelerin Gizli DNA’sı 🧬

Objeler sadece kendi özelliklerine bakmaz; bir de prototip zincirini kontrol eder.

• Eğer kendi özelliklerinde yoksa, prototipine bakar
• Orada yoksa bir üst prototipe
• En tepede Object.prototype → buradan da yoksa null

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

Object.setPrototypeOf(rabbit, animal);

console.log(rabbit.jumps); // true (kendi özelliği)
console.log(rabbit.eats);  // true (prototipten miras)

Eğlenceli Açıklama:

• rabbit kendi kasasında jumps var → hemen kullanır
• eats yok → komşusu animala bakar
• Eğer orada da yoksa → JS: “Tamam artık sana default bir şey veriyorum.” 😆

💡 Pratik İpucu:
Object.getPrototypeOf(rabbit) → prototipi görebilirsin. Zinciri takip etmek için birebir.

3️⃣ Constructor Fonksiyonları: Eski Ama Altın ✨

Class öncesi yöntem: Constructor Fonksiyonları.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Tüm kişiler greet metodunu paylaşacak
Person.prototype.greet = function() {
  console.log(`Hi, I'm ${this.name}`);
};

const alice = new Person("Alice", 25);
const bob = new Person("Bob", 30);

alice.greet(); // Hi, I'm Alice
bob.greet();   // Hi, I'm Bob

Açıklama Eğlenceli Tarzda:

• this.name → her instance’a özel, kendi kasasında saklı
• Person.prototype.greet → tüm instance’lar ortak metod kullanır, hafıza tasarrufu 💾
• JS, metodları paylaşarak hafıza dostu bir sistem kurar

💡 İpucu: Büyük projelerde prototype metodları kullanmak performansı artırır.

4️⃣ Class Syntax: Modern JS’in Tatlı Sarması 🍬

ES6 ile gelen class syntax’ı, constructor ve prototype kullanımını daha okunaklı hale getirir.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }

  celebrateBirthday() {
    this.age++;
    console.log(`${this.name} is now ${this.age} years old! 🎉`);
  }
}

const carol = new Person("Carol", 28);
carol.greet();            // Hi, I'm Carol
carol.celebrateBirthday(); // Carol is now 29 years old! 🎉

Açıklama Eğlenceli Tarzda:

• Class aslında prototype’in tatlı kaplaması 😎
• Metodlar tüm instance’lar tarafından paylaşılır
• Dinamik bir şekilde davranış eklemek çok kolay

💡 Pratik ipucu: Object.getPrototypeOf(carol) → class prototipini görebilirsin.

5️⃣ Dinamik Prototype: Sonradan Eklenen Güçler ⚡

Prototype, canlı bir DNA gibi: instance’lar oluşturulsa bile sonradan eklenen metodları otomatik alırlar!

Person.prototype.sayAge = function() {
  console.log(`I am ${this.age} years old`);
};

alice.sayAge(); // I am 25 years old
bob.sayAge();   // I am 30 years old
carol.sayAge(); // I am 29 years old

• Dinamik ve paylaşımlı metodlar → JS’in süper gücü 😎

💡 İpucu: Büyük projelerde metodları sonradan eklemek yerine, başlangıçta prototipe koymak okunabilirliği artırır.

6️⃣ Prototype Zinciri: Adım Adım Takip 🕵️‍♂️

console.log(carol.toString()); // [object Object]

• toString → carol’da yok
• Class prototipinde yok
• JS Object.prototype’e bakıyor → orada var

Zincir:

carol → Person.prototype → Object.prototype → null

💡 Pratik ipucu: Zinciri kırmak için:

const obj = Object.create(null);
console.log(obj.toString); // undefined

7️⃣ Prototip ve Performans Dostu Kod 💾

• Fonksiyonları prototype’a koy → her objede tekrar yaratılmaz
• Hafıza tasarrufu sağlar, performansı artırır

function Car(model) {
  this.model = model;
}

Car.prototype.drive = function() {
  console.log(`${this.model} is driving 🚗`);
};

const tesla = new Car("Tesla");
const bmw = new Car("BMW");

tesla.drive(); // Tesla is driving 🚗
bmw.drive();   // BMW is driving 🚗

• drive fonksiyonu 1 kez hafızada, herkes kullanıyor → hafıza dostu

💡 İpucu: Prototype kullanarak büyük uygulamalarda binlerce objede aynı metodu tekrar yaratmaktan kurtulursun.

8️⃣ Mini İpuçları: Sırları Keşfet 🗝️

• hasOwnProperty → objeye ait mi yoksa prototipten mi bak
• Object.keys(obj) → sadece kendi özellikleri
• for...in → prototip özelliklerini de döndürebilir

console.log(alice.hasOwnProperty('name'));  // true
console.log(alice.hasOwnProperty('greet')); // false, prototipte

💡 Altın ipucu: Prototype özelliklerini görmek için:

console.log(Object.getPrototypeOf(alice));

9️⃣ Sıradışı Kullanım: Fonksiyonları Prototype ile Paylaşmak 🦸‍♂️

Prototype sadece metodları değil, fonksiyonları da paylaşabilir:

function Calculator() {}

Calculator.prototype.add = function(a, b) {
  return a + b;
};

Calculator.prototype.subtract = function(a, b) {
  return a - b;
};

const calc1 = new Calculator();
console.log(calc1.add(5, 3));      // 8
console.log(calc1.subtract(10, 4)); // 6

• 1000 Calculator instance’ı bile olursa, fonksiyonlar tek kopya hafızada 😎

💡 Pratik ipucu: Büyük uygulamalarda “helper” fonksiyonları prototype’a koy, hafıza tasarrufu yap.

🎯 Özet: Prototyping’i Master Etmek

• Objelerin gizli DNA’sı → prototype
• Özellik yoksa zincirde yukarı çıkar
• Constructor / Class → syntactic sugar
• Metodlar prototipe koy → hafıza dostu
• Dinamik ekleme → tüm instance’lar otomatik alır
• Zinciri kırmak → Object.create(null)
• Hafıza dostu ve performanslı kod → büyük projelerde fark yaratır

Son söz: “JavaScript objeleri seni şaşırtabilir, ama prototip DNA’sını anladığında, her objeyi istediğin gibi yönlendirebilirsin!” 😄