JavaScript Nesne Prototipi

Her JavaScript nesnesinin bir prototipi vardır. Nesneler özelliklerini ve metotlarını prototip nesnesinden alır.

JavaScript prototipleri

JavaScript nesneleri özelliklerini ve metotlarını prototiplerinden alır.

JavaScript literal veya new Object() ile oluşturulduğunda özellik ve metotlarını Object.prototype isimli prototipten alır.

new Date() ile nesne oluşturulduğunda özellik ve metotlarını Date.prototype isimli prototipten alır.

Tüm nesneler prototipini Object.prototype isimli prototipten alır.

JavaScript nesneleri (Array, RegExp, Function, …) özellik ve metotlarını Object.prototype isimli prototipten alır.

Prototip oluşturma

Nesne prototipi oluşturmanın en kolay yolu nesne kurucu fonksiyonunu kullanmaktır.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
}
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
</script>

Oluşturulan prototipten yeni nesne oluşturmak için new anahtar kelimesi kullanılır.

Nesneye özellik ekleme

Bir nesneye yeni özellik eklemek kolaydır.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
}
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
yusuf.gozRengi = "Siyah";
alert(yusuf.gozRengi);   // Siyah
alert(mehmet.gozRengi);  // ???
</script>

Özellik sadece yusuf isimli nesneye eklenecektir.

Nesneye metot ekleme

Bir nesneye yeni metot eklemek de kolaydır.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
}
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
yusuf.adiSoyadi = function (){
  return this.adi + " " + this.soyAdi;
};
alert(yusuf.adiSoyadi());   // Yusuf Sefa
alert(mehmet.adiSoyadi());  // undefined
</script>

Metot sadece yusuf isimli nesneye eklenecektir.

Prototipe özellik ekleme

Bir nesneye kolayca özellik eklendiği gibi prototipe eklenemez.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
}
Kisi.gozRengi = "Siyah";
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
alert(mehmet.gozRengi);  // undefined
alert(yusuf.gozRengi);   // undefined
</script>

Prototip özellikleri nesne kurucusuna eklenebilir.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
    this.gozRengi = "Siyah";
}
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
alert(mehmet.gozRengi);  // Siyah
alert(yusuf.gozRengi);   // Siyah
</script>

Prototipe metot ekleme

Bir nesneye kolayca metot eklendiği gibi prototipe eklenemez.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
}
Kisi.adiSoyadi = function() { return this.adi + " " + this.soyAdi; };
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
alert(mehmet.adiSoyadi());  // undefined
alert(yusuf.adiSoyadi());   // undefined
</script>

Prototip metotları nesne kurucusuna eklenebilir.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
    this.adiSoyadi = function() {
      return this.adi + " " + this.soyAdi;
  }
}
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
alert(mehmet.adiSoyadi());  // Mehmet SEZER
alert(yusuf.adiSoyadi());   // Yusuf Sefa SEZER
</script>

Nesne protipini kullanma

JavaScript prototype özelliği ile nesne kurucu prototipine yeni özellik eklenebilir.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
}
Kisi.prototype.gozRengi = "Siyah";
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
alert(mehmet.gozRengi);  // Siyah
alert(yusuf.gozRengi);   // Siyah
</script>

JavaScript prototype özelliği ile nesne kurucu prototipine yeni metot eklenebilir.

<script>
function Kisi(a, s, y) {
    this.adi = a;
    this.soyAdi = s;
    this.yas = y;
}
Kisi.prototype.adiSoyadi = function() { return this.adi + " " + this.soyAdi; };
var mehmet = new Kisi("Mehmet", "SEZER", 45);
var yusuf = new Kisi("Yusuf Sefa", "SEZER", 75);
alert(mehmet.adiSoyadi());  // Mehmet SEZER
alert(yusuf.adiSoyadi());   // Yusuf Sefa SEZER
</script>

Tüm JavaScript nesneleri prototype özelliğine sahiptir.

JavaScript nesnelerine ait prototiplerin değiştirilmesi beklenmedik sonuçlar verebilir.

Neden prototip?

Metot ekleme işlemini kurucu içerisinde yapabildiğimiz halde neden prototype kullanalım sorusu aklınıza gelebilir.

JavaScript Nesne Yönelimli Programlama yazımda “tüm JavaScript değerleri bir nesnedir” demiştik.

Bir nesne, nesne kurucu ile oluşturulduğunda JavaScript belleğe nesne kurucusuna ait tüm özellik ve metotların bir kopyasını oluşturur.

Nesne kurucusu içerisinde 10 fonksiyon olsun.

Nesne kurucusu ile 1000 adet nesne kopyası oluşturulsun.

Bellek kullanımı ne kadar da fazla oldu. (10000)

Ancak prototype ile yazılan fonksiyonların kopyası oluşturulmaz sadece referansı tutulur.

Her kopyalanan nesne içerisinde prototype nesnesinin referansı tutularak fonksiyona erişilir.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.