JavaScript “Object”, “Property”, “Prototype”, “Constructor” kullanımı

Zaten uzun uzun yazılar yazıyoruz. Bunu zaten bir çok blogger da yapıyor.

Fakat bu başlıktaki gibi kısa bir bilgiyi o yığınlarca kelime haznelerinden insanların bulması güçleşiyor. O nedenle ara ara bu gibi kısa bilgilendirmeleri yapacağız.

Property

JavaScript Property, objelere özellik eklemek olarak tercüme edilebilir.

var siteAccount = {}; // Object
siteAccount.number = 114521; // Property

Bir property eğer bir fonksiyonu işaret ediyorsa ona methoddiyebiliriz.

var siteAccount = {}; // Object
siteAccount.number = 114521; // Property
siteAccount.name = function() {
     return  "vanillajs.wordpress.com";
};

Constructor

Constructor (Kurucu metodu), ise;

var siteAccount = function(number, name){
   this.number = number;
   this.name = name;
   return this.number + " - " + this.name;
};

var newSiteAccout = new siteAccout("112473", "vanillaJS");

console.log(newSiteAccount); 
//log -> 112473 - vanillaJS

Prototype

Bir fonksiyonun içinde “this”‘i kullanarak aitliği belirleyebiliyoruz. Peki ya o fonksiyonun dışında yazmak istersek? İşte o zaman Prototiplerini oluşturmamız gerekir.

Javascript Object tipinde bulunan prototype adlı özel bir metod, tüm nesnelerde bulunur. Bu metod sayesinde nesnelere yeni property veya metodlar ekleyebilirsiniz. Constructor fonksiyonları ile kendi özel tiplerimizi oluşturmamız mümkündür. Oluşturduğumuz tipe ait iki farklı nesne örneği oluşturacağımız vakit her bir nesne örneği kendi property kümesini bünyesinde barındırır. Bu durum, veri tutucu property’ler için makul görünse de metodlar için bir sorun haline gelebilir. Metodlarımızı oluşturduğumuz tip içerisinden ayırabiliriz.

[1]

Örnek-1: Prototype kullanılmadan [1]

var Rectagle = function (x,y) {
     this.x = x;
     this.y = y;
     this.Area = function() { return x*y; };
};

Örnek-2: Prototype kullanarak [1]

var Rectangle = function (x, y) {
    this.x = x;
    this.y = y;
};
 
Rectangle.prototype = {
    Area: function() { return (this.x * this.y); }
};

Örnek-1 deki alan hesaplayıcı metod olan Area metodu Örnek-2 de tipin prototype metoduna tanımlanmıştır. [1]

Bu bize ne fayda sağlamıştır? Örnek-1 de constructor içinde tanımlanan fonksiyon için her Rectangle nesnesi oluşturulduğunda bellekte anonim bir fonksiyon oluşturulacak ve yer tutacak. Ancak Örnek-2 de durum farklı olacaktır. Prototype property’ler static olduklarından her Rectangle nesnesi prototype içine tanımlanan metotları referans olarak görecektir. [1]

Ayrıca Rectange tipine ait değer tutucu (x,y) üyeler ve fonksiyonlar ayrılmış oldu. Bu ayrımı farklı Javascript dosyalarına bile dağıtmak mümkündür. [1]

Prototype kullanımı öncelikli olarak performans artışı sağlamakla birlikte kodun okunabilirliğini de arttırmak açısından faydalı olmaktadır. [1]

Alıntı: [1]


Bayram Üçüncü | bayramucuncu.com/avascript-nesne-kavrami/

Vanilya (Vanilla) JS nedir?

Aslına bakarsanız Vanilla JS, Pure JS ve Plain JS terimlerinin hepsi aynı şeyi ifade eder. Bu ifade “vanilla.js” isimli bir kütüphaneden gelmektedir ki onun da temelinde bir espri yatar.

Bu terimleri daha fazla açmak gerekirse, jQuery gibi bir takım seçici motorlar (Selector Engine) bizlere JavaScript yazmakta çok büyük kolaylıklar sağlar. Ancak bu gibi motorlar çok büyük kitlelere hitap ettiklerinden gittikçe büyüdüler. Böylelikle kütüphane havuzunda barındırdıkları yardımcı kodlar gittikçe arttı. Neticede toplam kod satırları ve dolayısıyla kapladıkları dosya boyutları da aynı oranda artış sergiledi ki, bu durum performansı da bir o kadar etkiledi.

JQuery gibi motorları kullandığımızda bir işlev yazmak için harcadığımız emek/iş gücü düşerken jQuery’in tüm kütüphanelerini çağırmak zorunda kaldığımızdan dolayı yazdığımız kod’un internet tarayıcıları, dolayısıyla insanlar üzerindeki performansı da oldukça düşük olmaya başladı.

Bu durumu şöyle ifade edebiliriz; bir pankek yapmak için koca bir fırın inşa ediyor ve o fırının içinde sadece kek üretimi yapıyoruz. Oldukça saçma değil mi? İşte kullanmadığımız bir yığın işlevleri içeren o motorları kullanmak da oldukça saçma.

İşte size jQuery vs. (saf) JavaScript performans diyagramı:

Vanilla JS vs. jQuery

Bu arada eminim Opera’nın JavaScript performansının Google Chrome’e dan daha iyi olduğu sizin de gözünüzden kaçmamıştır 😉

Nedir bu vanilla.js ?

Yazımızda daha önce de bahsettiğimiz üzere vanilla.js tamamen bir espriden ibaret. Asıl internet sitesi: http://vanilla-js.com/ olan ve her ne kadar şakacıktan da olsa bir framework’dur kendisi.

Yani: vanilla.js = Vanilla JS = Pure JS = Plain JS = (Saf) JavaScript

Zaten vanilla.js dosyasını indirmek isterseniz içinin boş olduğunu göreceksiniz. Seçici kütüphanelerinden hangisini tıklarsanız tıklayın Script’in dosya boyutunda bir değişiklik olmadığını ve 0KB olduğunu göreceksiniz.

Bu bir sitem midir? Yoksa espri mi? Bilinmez! Fakat bir amaca hizmet ettiği pekala ortada.

Ne yapmalı?

Artık bir seçici motor’u ve/veya framework kullanır mısınız? Yoksa projelerinizi biraz daha emek harcayıp saf JS ile mi kodlarsınız orası size kalmış. İşte pırasa, işte sapı!