Javascript Prototype ve Prototype Chain

Bu makalede Prototype ve Prototype Chain kavramlarını inceleyeceğiz. Bu kavramları açıklamadan önce Javascript te neden Prototype ihtiyacımız var onu öğrenelim.

Neden Prototype’e İhtiyacımız Var ?

Javascript programımızda Person nesnesine ihtiyacımız olduğunu düşünelim.

Bu ihtiyacımızı görür fakat birden çok person nesnesine ihtiyacımız olduğu senaryoyu

düşünelim. Muhtemelen bu işi yapması için bir fonksiyon yazardık.

Bu güzel ama bunu yapmak için doğru yol bu mu?

Eğer milyonlarca person nesnesine ihtiyacınız olursa bu fonksiyonu kullanmak iyi bir fikir değil çünkü her nesne için hafızada eat() ve sleep() fonksiyonları oluşacak bu da hafızayı gereksiz yere harcamaktan başka bir şey değil.

Bunun yerine person fonksiyonunda yazdığımız fonksiyonları bir kez oluşturup fonksiyonun içerisinde bu fonksiyonlara referans verirsek eat() ve sleep() fonksiyonları hafızada her seferinde yeniden oluşmak yerine bir kere oluşur.

Ancak bu yöntemin de bazı dezavantajları vardır. Ne olduğunu tahmin edebilir misiniz? Ben açıklamadan önce bir düşünün.

Diyelim ki daha sonradan Person nesnesine bir fonksiyon ekleme ihtiyacı duydunuz.Bu durumda ,önce PersonMethods ‘a fonksiyonumuzu ekler sonrada Person fonksiyonundan tekrar referansını alırdık.

Bu büyük bir sorun değil fakat bu gibi değişiklikleri yapabileceğimiz ve bu değişikliklerin tüm instance lara yansıtılacağı ortak bir yerin olması elbette güzel olurdu.İşte Javascriptte Prototype ların devreye girdiği yer burasıdır.

Prototype

Prototype temel olarak javascriptte bir fonksiyonun özelliği(Property) dir. Javascriptte bir fonksiyon oluşturduğumuzda javascript motoru fonksiyona otomatik olarak Prototype adında bir özellik(Property) ekler. Bu prototype özelliği bir nesnedir ve bu nesne de constructor adında property e sahiptir. Bu constructor property si oluşturulan fonksiyona işaret eder. aşağıdaki resimde görüldüğü gibi

Prototype özelliği ise bahsettiğimiz prototip nesnesine işaret eder.(Yeşil ok)

Fonksiyonun prototip özelliğine functionName.prototype sözdizimini kullanarak erişebiliriz. Ve bir fonksiyonun Prototype nesnesinden, functionName.prototype.constructor ile fonksiyon nesnesine tekrar erişebiliriz. Hala kafanız karıştıysa bunu anlamak için birkaç kod yazalım.

Constructor Fonksiyonları Kullanarak Nesnelere Oluşturmak

Şimdi name ve age olmak üzere iki adet parametre alan constructor fonksiyonumuzu ve bu fonksiyonun prototype nesnesini konsola yazdıralım.

Aşağıdaki gibi bir çıktı göreceksiniz.

görüldüğü gibi console.log(Person.prototype) ile fonksiyonumuzun prototype nesnesine ulaştık ve bu nesnenin söylediğim gibi bir constructor özelliği bulunuyor.Şimdilik __proto__ özelliğini kafanıza takmayın. Şimdi ise konsolumuza console.log(Person.prototype.constructor) ı yazdıralım.

evet doğru az önce tanımladığımız fonksiyonun kendisi. resim 5 ile anlattığım olayı kanıtlamış olduk.Bir fonksiyon oluşturduğumuzda javascript motoru fonksiyona prototype adında bir property oluşturur bu property ile fonksiyonun prototip nesnesine ulaşırız bu nesnenin içerisinde de constructor adında bir property daha vardır bu property ise fonksiyona işaret eder. şimdi ise bu anlattıklarımızı kanıtlayalım.

Burada ilk logumuzda beklediğimiz sonuç Person fonksiyonumuzun prototype nesnesinde bulunan constructor property sinin bizi tekrar Person fonksiyonuna getirmesi, ikinci logda ise Person fonksiyonunun prototype nesnesindeki constructor propertysi fonksiyonumuza geri işaret ediyor o zaman constructorun prototype ı Person.prototype e eşit olmalı.

Bu sonuçlar bize haklı olduğumuzu gösteriyor.Prototype in ne olduğunu az çok öğrendik. Şimdi ise daha önce bahsettiğimiz sorun için Prototype kullanalım.

ve yeni bir Person nesnesi oluşturup onu konsola loglayalım.

Peki ya metodlarımız nerde? Onları prototype nesnesine eklemiştik. ancak Bob nesnemizde görünmüyor fakat orada başka birşey var __proto__ ne olduğuna bakalım.

Metodlarımız burada. görünen o ki __proto__ özelliği prototype nesnesine işaret ediyor.

Javascirpt, bir instance oluşturduğumzda ona __proto__ adında prototype nesnesine işaret eden bir özellik ekler. Bazen bir resim 1000 kelamdan iyidir aşağıdaki şemaya bir bakalım.

Eğer dediğim şey doğruysa yani __proto__ özelliği prototype nesnesine işaret ediyorsa onu genişlettiğimizde metotları görüyor olmalıyız.

O zaman Person.prototype ın Bob.__proto__ ya eşit olması gerekiyor.

Evet aynen öyle.

Son olarak Prototype konusunu özetlmek gerekirse;

Bir fonksiyon oluşturduğumuzda javascript motoru otomatik olarak o fonksiyon için bir Prototype nesnesi oluşturur ve fonksiyona o nesneye erişmek için kullanabilecek bir prototype özelliği ekler ve prototype nesnesi içerisine de constructor adında bir özellik ekler bu da fonksiyona işaret eder.

Constructor fonksiyondan bir instance oluşturduğumuzda ise bu instance __proto__ adında bir özellik eklenir ve bu özellik fonksiyonun prototype nesnesine işaret eder.

Prototype Chain konusunu bir sonraki makalede anlatmak istiyorum. o yüzden şimdilik bir mola:)