JavaScript ve Nesneler

Erdem Uslu
2 min readNov 13, 2019

JavaScript ile MVC yapısında bir “webapp” oluşturma ve bu sürecin eğitimini video serisi olarak hazırlama fikrim vardı ve bu fikri geçen hafta itibariyle hayata geçirdim. İlk videoya buradan erişebilirsiniz. Bununla birlikte ilk dersi çektikten sonra, JavaScript’te nesnelerle yeteri kadar içli dışlı olmadan çok fazla ileriye gidilemeyeceğini farkettim. Sonuç olaraksa javascript ve nesneler üzerine bir şeyler yazmanın video serisini destekleyici nitelikte olabileceğine karar verdim. Bu yazıda javascript’te nesnelerin özellikleri ve bunları nasıl kullanabileceğimiz hakkında bir şeyler anlatmaya çalışacağım.

Yaygın olarak JavaScript’te nesne oluşturulurken küme parantezleri, {}, kullanılır. Nesneye bir özellik/yöntem atamak içinse Nesne.ÖzellikAdı = ÖzellikDeğeri seklinde bir tanımlama kullanılır.

https://gist.github.com/erdemuslu/b7cdc9f627bcfbc18966edee4b05ac48

user adında bir nesne oluşturduk ve user.propertyName = propertyValue şeklinde oluşturduğumuz nesneye yeni özellikler atadık.

Peki oluşturduğumuz nesneyi kullanılacak yerlere göre çeşitlendirmek istiyorsam? Bir nesneden birden fazla örnek yaratıp, her bir örneğin kendi metot ve özelliklerini kullanmasına ihtiyacım varsa? Bu işi yapabilmek için JavaScript bize birkaç yöntem sunmaktadır ve temelde bu yöntemlerin hepsi çıktı olarak bir nesne yaratır ve yaratılan o nesneye özellik ve metot ekler. Kavramsal olarak yapılan bu işi sunan yöntemlere “Instantiation Patterns” denir.

Functional Instantiation

Bu “pattern”i kullanarak nesne yaratmak istediğimizde, öncelikle bir fonksiyon yaratıp içinde boş bir obje oluştururuz. Sonrasında nesneye atamak istediğimiz özellikleri tanımlarız. Geriye oluşturduğumuz nesneyi çıktı olarak döndürmek kalır.

https://gist.github.com/erdemuslu/66d3b9fc8cd022ae69cc4f4570dbdf55

Birçok insan JavaScript’e ilk başladığında kolay kullanımı sebebiyle bu yöntemi tercih edebilir. Özellik ve metotlarının kolayca okunabilmesi, koda dışarıdan bakacak bir insan için nispeten daha anlaşılır olması avantaj sağlar. Ancak her bir örneklemle birlikte oluşturduğumuz protitipin özellikleri tekrardan ram’e yazılır ve hernhagi bir özellik güncellendiğinde referans olarak atanmadıkları için sadece ilgili güncellemeyi kapsayan örneklem üzerinde etkili olur.

Functional Shared Instantiation

Bir üstteki “pattern”e benzer bir yötemdir. Burada nesneye yeni metot eklemek için fazladan bir “merge” fonksiyonu yazmış bulunuyoruz. Yine createUser kullanarak oluşturduğumuz her bir örneklem için tüm metot ve özellikler tekrardan üretilir.

https://gist.github.com/erdemuslu/8598317aecb8d496df49edd5f3b25080

Prototypal Instantiation

Nesneyi oluştururken “Object” nesnesinin “create” metodu kullanılır ve içerisine “methods” nesnesi iliştirilir. Diğer iki yönteme göre en önemli farkı, oluşturulan createUser nesnesi ile üretilen her bir nesne için özellikler çoğaltılmaz. Böylelikle daha performans odaklı bir kullanım ortaya çıkar.

https://gist.github.com/erdemuslu/96c119d378345246f2a9569a7dd8ccfc

Ancak oluşturulan yeni nesnelere gönderilen “methods” nesnesinde yapılacak herhangi bir değişikliği titizlikle uygulamayı gerektirir. Tüm çoğaltılan nesneler ilk değeri referans aldığı için herhangi bir değişiklikte hepsi etkilenecektir.

Pseudoclassical Instantiation

Diğer yöntemler gibi oluşturucu içerisinde herhangi bir değer dönmeyiz. Bir nesne yaratıp, ona özellikler ekleyip “return” etmek yerine, baz bir değer oluşturup, o değerden “new” parametresi ile yeni nesneler üretiriz. “new” parametresi “this” ile iliştirilen özellikleri “global/window” yerine tanımladığımız yeni değişkene atar.

https://gist.github.com/erdemuslu/9a39228c95f2c888d04a99fac064fe30

“Object.create” “pattern”i ile benzer sonuçlar doğurur. Performans ve dikkat edilmesi gereken kullanım şekilleri açısından.

ES6 Instantiation

Benzer şekilde “new” parametresi ile “class syntax”ını kullanarak nesne kopyalayabiliriz.

https://gist.github.com/erdemuslu/a3dffa8bf04be3ddc30d9cbc56da9f77

“Pseudoclassical Instantiation” kullanımına oldukça benziyor. Sadece “prototype” ile kullanmak yerine metotları doğrudan içeride tanımlıyoruz.

Sonuç

Bu bilgilerle birlikte video serisinin daha açıklayıcı olacağını düşünÿorum. Böylelikle videoda çok fazla değinemediğimiz konuların üzerinden de geçmiş olduk. Umarım faydalı olmuştur.

--

--