JavaScript'te her array'de .push(), .pop(), .map() gibi onlarca metot var. Her string'de .toUpperCase(), .split(), .includes() var. Peki bu metotlar nereden geliyor? Her array veya string oluşturduğumuzda bu metotların kopyası mı oluşuyor?
Hayır! İşte burada prototype kavramı devreye giriyor. Prototype, JavaScript'in en önemli ve aynı zamanda en kafa karıştırıcı konularından biri. Ama merak etmeyin, aslında fikir oldukça basit.
Prototype Nedir?
Prototype, JavaScript nesnelerinin özellik ve metotları miras aldığı şablon nesnedir. Bir nevi "blueprint" veya "kalıp" gibi düşünebilirsiniz.
Temel Fikir
┌─────────────────────────────────────────────────────────┐
│ Array.prototype │
│ ───────────────────────────────────────────────────── │
│ push(), pop(), map(), filter(), reduce(), includes() │
│ concat(), slice(), splice(), forEach(), find()... │
└─────────────────────────────────────────────────────────┘
▲
┌──────────────┼──────────────┐
│ │ │
[1, 2, 3] ["a", "b"] [true, false]
Her array, Array.prototype'a referans verir.
Kendi kopyaları yok, hepsi aynı şablonu kullanır.Neden Prototype?
Diyelim ki JavaScript'te prototype olmasaydı. Her array oluşturduğunuzda:
const liste1 = [1, 2, 3];
const liste2 = [4, 5, 6];
const liste3 = [7, 8, 9];Her birinde push, pop, map, filter gibi 70+ metodun kopyası olurdu. Bu da:
- Hafızayı gereksiz yere doldururdu
- Performansı düşürürdü
- Kod tekrarına yol açardı
Prototype sayesinde tüm array'ler aynı şablonu paylaşır. Metotlar tek bir yerde (prototype'ta) tanımlıdır.
Prototype'ı Görmek
Bir array oluşturup tarayıcı konsolunda inceleyelim:
const sayilar = [10, 20, 30];
console.log(sayilar);Konsolu açın ve array'i genişletin. Şöyle bir şey göreceksiniz:
▼ (3) [10, 20, 30]
0: 10
1: 20
2: 30
length: 3
▶ [[Prototype]]: Array(0)İşte o [[Prototype]] (veya eski tarayıcılarda __proto__) kısmı, bu array'in baktığı şablon nesneyi gösterir.
Prototype İçeriği
[[Prototype]]'ı açarsanız tüm array metotlarını görürsünüz:
▶ [[Prototype]]: Array(0)
▶ at: ƒ at()
▶ concat: ƒ concat()
▶ every: ƒ every()
▶ fill: ƒ fill()
▶ filter: ƒ filter()
▶ find: ƒ find()
▶ forEach: ƒ forEach()
▶ includes: ƒ includes()
▶ map: ƒ map()
▶ pop: ƒ pop()
▶ push: ƒ push()
... ve daha fazlasıFarklı Türlerin Prototype'ları
Her JavaScript türünün kendi prototype'ı vardır:
| Tür | Prototype | Bazı Metotları |
|---|---|---|
| Array | Array.prototype | push, pop, map, filter, reduce |
| String | String.prototype | toUpperCase, split, includes, trim |
| Number | Number.prototype | toFixed, toString, toPrecision |
| Object | Object.prototype | hasOwnProperty, toString, valueOf |
| Function | Function.prototype | call, apply, bind |
String Prototype Örneği
const mesaj = "merhaba dünya";
// Bu metotlar String.prototype'tan geliyor
console.log(mesaj.toUpperCase()); // "MERHABA DÜNYA"
console.log(mesaj.split(" ")); // ["merhaba", "dünya"]
console.log(mesaj.includes("dünya")); // trueNumber Prototype Örneği
const fiyat = 99.456;
// Bu metotlar Number.prototype'tan geliyor
console.log(fiyat.toFixed(2)); // "99.46"
console.log(fiyat.toString()); // "99.456"Prototype'a Erişim
Prototype nesnesine birkaç yolla erişebilirsiniz:
1. Constructor Üzerinden
// Array'lerin şablonu
console.log(Array.prototype);
// String'lerin şablonu
console.log(String.prototype);
// Object'lerin şablonu
console.log(Object.prototype);2. Nesne Üzerinden (proto)
const meyveler = ["elma", "armut"];
// Bu array'in baktığı prototype
console.log(meyveler.__proto__);
// Array.prototype ile aynı mı?
console.log(meyveler.__proto__ === Array.prototype); // true3. Object.getPrototypeOf()
const isim = "Ahmet";
// Modern yöntem
console.log(Object.getPrototypeOf(isim));proto vs prototype
Bu iki terim sık karıştırılır. Farkı anlayalım:
| Terim | Ne? | Nerede? |
|---|---|---|
prototype | Şablon nesnenin kendisi | Constructor fonksiyonlarda (Array, String, vb.) |
__proto__ | Şablona referans | Her nesnede (array, string, object, vb.) |
// prototype: Şablonun kendisi
console.log(Array.prototype); // Tüm array metotları burada
// __proto__: Şablona referans
const arr = [1, 2];
console.log(arr.__proto__); // Array.prototype'a işaret eder
// İkisi aynı nesneyi gösterir
console.log(arr.__proto__ === Array.prototype); // trueGörsel Temsil
Array.prototype (şablon nesne)
▲
│ referans (__proto__)
│
[1, 2, 3] (array örneği)Prototype Zincirleme
Prototype'lar zincir halinde birbirine bağlıdır. Buna prototype chain denir.
const dizi = [1, 2, 3];
// dizi'nin prototype'ı → Array.prototype
// Array.prototype'ın prototype'ı → Object.prototype
// Object.prototype'ın prototype'ı → null (zincir sonu) [1, 2, 3]
│
▼
Array.prototype (push, pop, map...)
│
▼
Object.prototype (toString, hasOwnProperty...)
│
▼
null (zincir sonu)Pratik Örnek
const liste = ["a", "b", "c"];
// Array metodunu kullan
liste.push("d"); // Array.prototype'tan
// Object metodunu kullan
liste.hasOwnProperty(0); // Object.prototype'tan → true
// toString - hem Array hem Object'te var
// Array'inki önce bulunur (daha yakın)
liste.toString(); // "a,b,c"Prototype'a Metot Ekleme
Prototype'a kendi metotlarımızı ekleyebiliriz. Dikkat: Bu genellikle önerilmez ama nasıl çalıştığını anlamak önemli.
String'e Metot Ekleme
// Tüm string'lere "bagir" metodu ekleyelim
String.prototype.bagir = function() {
return this.toUpperCase() + "!!!";
};
// Artık her string bu metodu kullanabilir
const selam = "merhaba";
console.log(selam.bagir()); // "MERHABA!!!"
const isim = "ahmet";
console.log(isim.bagir()); // "AHMET!!!"Array'e Metot Ekleme
// Tüm array'lere "ilkVeSon" metodu ekleyelim
Array.prototype.ilkVeSon = function() {
return {
ilk: this[0],
son: this[this.length - 1]
};
};
// Kullanım
const harfler = ["a", "b", "c", "d", "e"];
console.log(harfler.ilkVeSon()); // {ilk: "a", son: "e"}
const numaralar = [10, 20, 30];
console.log(numaralar.ilkVeSon()); // {ilk: 10, son: 30}Neden Önerilmez?
// Mevcut metotları ezmek tehlikeli!
Array.prototype.push = function() {
return "Bu array'e ekleme yapılamaz!";
};
const test = [1, 2, 3];
test.push(4); // 4 eklenmez, mesaj döner!
// Tüm array'ler artık bozuk!Sorunlar:
- Başka kütüphanelerle çakışabilir
- Gelecekteki JavaScript güncellemeleriyle çakışabilir
- Kodun okunabilirliğini azaltır
- Debug etmeyi zorlaştırır
Metot Arama Sırası
JavaScript bir metot çağırdığınızda şu sırayla arar:
const kelimeler = ["elma", "armut"];
// kelimeler.push(4) çağrıldığında:
// 1. kelimeler nesnesinin kendisinde "push" var mı? → Hayır
// 2. kelimeler.__proto__ (Array.prototype)'da var mı? → Evet! Bulduk.
// kelimeler.toString() çağrıldığında:
// 1. kelimeler nesnesinin kendisinde "toString" var mı? → Hayır
// 2. Array.prototype'da var mı? → Evet! (Array'in kendi toString'i)
// kelimeler.hasOwnProperty(0) çağrıldığında:
// 1. kelimeler'de var mı? → Hayır
// 2. Array.prototype'da var mı? → Hayır
// 3. Object.prototype'da var mı? → Evet! Bulduk.Pratik Örnek: Kendi Nesnemiz
// Basit bir nesne oluşturalım
const araba = {
marka: "Toyota",
model: "Corolla",
bilgiVer: function() {
return `${this.marka} ${this.model}`;
}
};
console.log(araba.bilgiVer()); // "Toyota Corolla"
console.log(araba.toString()); // "[object Object]" - Object.prototype'tan
console.log(araba.hasOwnProperty("marka")); // true - Object.prototype'tanPrototype Kontrolü
// araba'nın prototype'ı nedir?
console.log(araba.__proto__ === Object.prototype); // true
// Object.prototype'ın prototype'ı nedir?
console.log(Object.prototype.__proto__); // null (zincir sonu)Özet
| Kavram | Açıklama |
|---|---|
| Prototype | Nesnelerin metot ve özellikleri miras aldığı şablon nesne |
__proto__ | Her nesnede bulunan, prototype'a referans veren özellik |
.prototype | Constructor fonksiyonlarda bulunan, şablonun kendisi |
| Prototype Chain | Prototype'ların birbirine bağlı zinciri |
| Metot Arama | Önce nesnede, sonra prototype zincirinde aranır |
Neden Önemli?
Prototype kavramını anlamak şunlar için kritik:
- JavaScript'in temelini anlamak - Tüm OOP bu sistem üzerine kurulu
- Constructor Functions - Kendi nesnelerimizi oluştururken prototype kullanacağız
- Classes - ES6 class'ları aslında prototype'ın üzerine syntax sugar
- Miras (Inheritance) - Nesneler arası miras prototype ile çalışır
- Performans - Metotların neden tek yerde tutulduğunu anlamak
Sırada Ne Var?
Prototype'ın ne olduğunu öğrendik. Peki kendi nesnelerimizi nasıl oluştururuz? Onlarca benzer nesne üretmek istesek ne yaparız?
Bir sonraki makalede Object-Oriented Programming (OOP) kavramına giriş yapacağız ve JavaScript'te nesne yönelimli programlamanın temellerini öğreneceğiz.
