JS TARIHÇESI

JS’de MetaProgramming — 2

Bu yazıda JS MetaProgramming kavramını anlamak için Axel Rauschmayer, Deep JS kitabından notlar çıkararak konuyu anlatmaya devam ediyorum.

--

İlk yazıda JS zaten MetaProgramming konseptlerini içerdiğini ama Intercession (Bazı dil işlemlerinin yapılarını yeniden tanımlama) konusunu ES5 sonrasında Proxy özelliği ile getirdiğinden bahsetmiştik. Yukarıdaki linkini verdiğim kitaptaki örnekleri anlatmaya devam ediyoruz. Bu yazıda Proxy konusunu biraz daha detaylı inceliyor olacağız.

1. Nesne Üzerine Property Erişim (Target nesnemiz bir Obje iken)

İlk örneğimiz bir Proxy nesnesi oluşturmak üzerine. Bunun için bir target ikinci olarak target üzerindeki çağrımları yakalayacak olan handler var. Aşağıdaki örnekte target üzerinde hiç bir işlem yapılmadan direk handler tüm gelen isteklere statik olarak cevaplıyor.

  • Tüm get işlemleri 123 dönecek..
  • Tüm has işlemleri true dönecek…
Simple Proxy…

Burda target devreye katarak araya girip ara işlemleri yapıp sonrasında target üzerinde çağrımda yapabiliriz. Veya Target çağrım yaptıktan sonra bazı kontroller yapıp geriye dönen değeri değiştirebiliriz.

get -> return target[propKey];
has -> return propKey in target;

2. Fonksiyon Üzerine Proxy (Target nesnemiz bir Obje iken)

Örneğin bir fonksiyon çağrımı sırasında araya girmek istediğinizde apply araya üzerinden fonksiyon çağrımı konusunda araya girebilirsiniz.

apply: Making a function call. Triggered via:
proxy(···), proxy.call(···), proxy.apply(···)
Function apply Proxy https://mzl.la/3qrf4qz

Veya new ile constructor function için oluşturma anı arasına girebilirsiniz. Not: Fonksiyon Türleri hakkında daha fazla bilgi için bu yazımı okuyabilirsiniz.

construct: Making a constructor call. Triggered via:
new proxy(···)
Proxy for Constructor Function

3. Nesne Üzerindeki Birden Fazla Fonksiyonu, veya Fonksiyonların Birbirlerini Çağrımı nasıl Yakalayıp Bunlar üzerinde İşlem Yapabiliriz.

Object üzerinde property çağrımı üzerine return target[propKey] işimizi görüyordu. Ama bunu fonksiyonlara yaptığımızda bu fonksiyon hem başka bir fonksiyon çağırabilir hem de return sırasında return edeceğimiz değeri invoke etmemiz yani fonksiyonu çağırmamız gerekiyor işte burda return edeceğimiz değer aşağıdaki gibi olmalı..

return target[propKey].apply(this, args)
https://exploringjs.com/deep-js/ch_proxies.html#an-example

4. Proxy Devresini Kapatmak (Revoke)

Proxy revocable ile bir devre oluşturup. Tüm yaptığımız işlemleri bu devre üzerinden target iletip..

https://exploringjs.com/deep-js/ch_proxies.html#an-example

Sonrasında da revoke() metodunu çağırarak tüm bu çağrımları durdurabiliriz. Proxy üzerindeki get metoduna olan bağlantı bir anda off durumuna gelir.

https://exploringjs.com/deep-js/ch_proxies.html#an-example

5. Proxy Prototoype olarak kullanmak.

JS Prototype kavramlarını aşağıdaki yazılarda detaylıca değinmiştim.

Bir nesnenin kendisinde ilgili prop veya function bulamayınca __proto__ yani türediği sınıfta bu nesne var mı şeklinde bir üste sorar bu yaklaşıma prototype chain denir. İşte böyle bir noktada Object.create() kullanacağı proto nesnesini Proxy olarak oluşturup kullanabiliriz.

https://exploringjs.com/deep-js/ch_proxies.html#an-example

5. Intercept (Yakalanan) çağrılar Target Elemana Forward Edilmesi.

Burda her bir Proxy trap karşı bir Reflect.* kullanarak gelen Proxy isteğinin target yansıtılması gerçekleştirilebilir.

Aşağıdaki örneğe benzer şekilde her bir trap yapısını Reflect geçirerek fonksiyon vs.. çağrımlarının nasıl olacağı konusunda uğraşmanıza gerek kalmaz.

//Each Trap
handler.trap(target, arg_1, ···, arg_n)
//Reflect it
Reflect.trap(target, arg_1, ···, arg_n)

Örneğin aşağıdaki örnek daha önce bahsettiğim standart Proxy yakalaması ve bunu target nesneye ilettiğini görüyoruz.

https://exploringjs.com/deep-js/ch_proxies.html#an-example

Aynı yapıyı Reflect.* ile kurguladığınızda target nesne üzerinde ekstra logic kurmadan işlemlerinizi gerçekleştirebilirsiniz.

https://exploringjs.com/deep-js/ch_proxies.html#an-example

Örnek Kodlar

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--