JavaScript Proxy ve Reflect: Dinamik Nesne Kontrol\u00fc \u0130\u00e7in G\u00fc\u00e7l\u00fc Ara\u00e7lar<\/p>\n
JavaScript’te Proxy ve Reflect, nesneleri dinamik olarak kontrol etmek ve davran\u0131\u015flar\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Bu makalede, bu iki \u00f6zelli\u011fin ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131klar\u0131n\u0131 ve JavaScript uygulamalar\u0131n\u0131zda onlar\u0131 nas\u0131l kullanabilece\u011finizi ayr\u0131nt\u0131l\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n
JavaScript Proxy’si, bir nesnenin yerine ge\u00e7en ve onunla etkile\u015fime giren bir ara katmand\u0131r. Proxy, nesneye eri\u015fimleri yakalar ve manip\u00fcle eder, b\u00f6ylece temel nesnenin davran\u0131\u015f\u0131n\u0131 \u00f6zelle\u015ftirebilir ve kontrol edebilirsiniz.<\/p>\n
Bir Proxy, a\u015fa\u011f\u0131daki gibi \u00e7e\u015fitli senaryolarda kullan\u0131labilir:<\/p>\n
* **Geli\u015ftirme Zaman\u0131 Hata Ay\u0131klama:** Bir proxy kullanarak, bir nesneye eri\u015fimleri takip edebilir, de\u011ferleri de\u011fi\u015ftirebilir veya hata mesajlar\u0131 g\u00f6nderebilirsiniz.
\n* **Veri Gizleme:** Proxy, bir nesnenin \u00f6zelliklerine eri\u015fimi k\u0131s\u0131tlamak ve yaln\u0131zca belirli i\u015flevlerin de\u011ferlere eri\u015fmesine izin vermek i\u00e7in kullan\u0131labilir.
\n* **Nesne Validasyonu:** Proxy, bir nesneye atanan de\u011ferlerin ge\u00e7erli oldu\u011fundan emin olmak i\u00e7in kullan\u0131labilir.
\n* **Otomatik Atama:** Bir proxy, belirli bir \u00f6zelli\u011fe de\u011fer atand\u0131\u011f\u0131nda ba\u015fka bir \u00f6zelli\u011fin g\u00fcncellenmesini otomatikle\u015ftirmek i\u00e7in kullan\u0131labilir.<\/p>\n
Bir Proxy olu\u015fturmak i\u00e7in `Proxy()` yap\u0131c\u0131s\u0131n\u0131 kullanabilirsiniz. Bu yap\u0131c\u0131, iki parametre al\u0131r:<\/p>\n
* **Hedef Nesne:** Proxy’nin temsil edece\u011fi nesne.
\n* **Yakalay\u0131c\u0131 Nesne:** Proxy’nin nesneye yap\u0131lan eri\u015fimleri nas\u0131l yakalayaca\u011f\u0131n\u0131 ve i\u015fletece\u011fini belirten bir nesne.<\/p>\n
\u0130\u015fte basit bir Proxy \u00f6rne\u011fi:<\/p>\n
“`javascript
\nconst target = { name: ‘Fatih Soysal’, age: 30 };<\/p>\n
const handler = {
\n get(target, prop) {
\n console.log(`’${prop}’ \u00f6zelli\u011fine eri\u015filiyor…`);
\n return target[prop];
\n }
\n};<\/p>\n
const proxy = new Proxy(target, handler);<\/p>\n
console.log(proxy.name); \/\/ ‘name’ \u00f6zelli\u011fine eri\u015filiyor…
\n“`<\/p>\n
Bu \u00f6rnekte, bir `target` nesnesi ve bir `handler` nesnesi olu\u015fturuyoruz. `handler` nesnesi, `get` \u00f6zelli\u011fini kullanarak `target` nesnesinin herhangi bir \u00f6zelli\u011fine eri\u015fildi\u011finde y\u00fcr\u00fct\u00fclen bir i\u015flevi tan\u0131mlar. Bu fonksiyon, `prop` adl\u0131 \u00f6zelli\u011fin ad\u0131n\u0131 yazd\u0131rarak eri\u015fimi takip eder ve daha sonra \u00f6zelli\u011fin de\u011ferini d\u00f6nd\u00fcr\u00fcr.<\/p>\n
Proxy’ler, \u00e7e\u015fitli t\u00fcrdeki eri\u015fimleri ve i\u015flemleri yakalamak i\u00e7in farkl\u0131 yakalay\u0131c\u0131 y\u00f6ntemleri sa\u011flar:<\/p>\n
* **get():** Bir \u00f6zelli\u011fe eri\u015fim.
\n* **set():** Bir \u00f6zelli\u011fe atama.
\n* **apply():** Bir fonksiyonun \u00e7a\u011fr\u0131lmas\u0131.
\n* **construct():** Yeni bir nesnenin olu\u015fturulmas\u0131.
\n* **deleteProperty():** Bir \u00f6zelli\u011fin silinmesi.
\n* **has():** Bir nesnede bir \u00f6zelli\u011fin olup olmad\u0131\u011f\u0131n\u0131n kontrol edilmesi.
\n* **ownKeys():** Bir nesnenin kendi \u00f6zelliklerinin adlar\u0131n\u0131n bir listesinin elde edilmesi.
\n* **getOwnPropertyDescriptor():** Bir \u00f6zelli\u011fin a\u00e7\u0131klamas\u0131n\u0131n elde edilmesi.
\n* **defineProperty():** Bir \u00f6zelli\u011fin tan\u0131m\u0131n\u0131n de\u011fi\u015ftirilmesi.
\n* **preventExtensions():** Nesnenin geni\u015fletilmesinin engellenmesi.
\n* **isExtensible():** Nesnenin geni\u015fletilebilir olup olmad\u0131\u011f\u0131n\u0131n kontrol edilmesi.<\/p>\n
Reflect API, JavaScript’in yerle\u015fik nesne modelini yans\u0131tan bir dizi i\u015flevi sa\u011flar. Bu i\u015flevler, Proxy’ler gibi \u00e7e\u015fitli i\u015flemleri ger\u00e7ekle\u015ftirmek ve daha g\u00fcvenli ve daha tutarl\u0131 bir \u015fekilde nesneleri manip\u00fcle etmek i\u00e7in kullan\u0131labilir.<\/p>\n
Reflect API, Proxy’ler ile yak\u0131n bir \u015fekilde \u00e7al\u0131\u015f\u0131r. \u00d6rne\u011fin, `get()` yakalay\u0131c\u0131 i\u015flevi, `Reflect.get()` i\u015flevini kullanarak temel nesnenin \u00f6zelli\u011fine eri\u015febilir. Bu, Proxy’lerin temel nesne ile nas\u0131l etkile\u015fime girdi\u011fine dair daha tutarl\u0131 bir yol sa\u011flar.<\/p>\n
Reflect API, a\u015fa\u011f\u0131daki gibi \u00e7e\u015fitli i\u015flevler sa\u011flar:<\/p>\n
* **Reflect.get():** Bir nesneden bir \u00f6zelli\u011fin de\u011ferini alma.
\n* **Reflect.set():** Bir nesneye bir \u00f6zelli\u011fe de\u011fer atama.
\n* **Reflect.apply():** Bir fonksiyonu \u00e7a\u011f\u0131rma.
\n* **Reflect.construct():** Yeni bir nesne olu\u015fturma.
\n* **Reflect.deleteProperty():** Bir nesneden bir \u00f6zelli\u011fi silme.
\n* **Reflect.has():** Bir nesnenin belirli bir \u00f6zelli\u011fi i\u00e7erip i\u00e7ermedi\u011fini kontrol etme.
\n* **Reflect.ownKeys():** Bir nesnenin kendi \u00f6zelliklerinin bir listesini elde etme.
\n* **Reflect.getOwnPropertyDescriptor():** Bir \u00f6zelli\u011fin a\u00e7\u0131klamas\u0131n\u0131 elde etme.
\n* **Reflect.defineProperty():** Bir nesnenin \u00f6zelli\u011fini tan\u0131mlama.
\n* **Reflect.preventExtensions():** Bir nesnenin geni\u015fletilmesini engelleme.
\n* **Reflect.isExtensible():** Bir nesnenin geni\u015fletilebilir olup olmad\u0131\u011f\u0131n\u0131 kontrol etme.<\/p>\n
Bir proxy kullanarak, bir nesneye eri\u015fimleri takip edebilir ve hata ay\u0131klama bilgilerini kaydedebilirsiniz.<\/p>\n
“`javascript
\nconst target = { name: ‘Fatih Soysal’, age: 30 };<\/p>\n
const handler = {
\n get(target, prop) {
\n console.log(`’${prop}’ \u00f6zelli\u011fine eri\u015filiyor…`);
\n return target[prop];
\n }
\n};<\/p>\n
const proxy = new Proxy(target, handler);<\/p>\n
console.log(proxy.name); \/\/ ‘name’ \u00f6zelli\u011fine eri\u015filiyor…
\n“`<\/p>\n
Bu \u00f6rnekte, her eri\u015fimde \u00f6zelli\u011fin ad\u0131n\u0131 konsola yazarak nesneye eri\u015fimleri takip ediyoruz.<\/p>\n
Bir proxy kullanarak, belirli \u00f6zelliklere yaln\u0131zca belirli i\u015flevlerin eri\u015fmesine izin verebilirsiniz.<\/p>\n
“`javascript
\nconst target = { name: ‘Fatih Soysal’, age: 30, privateInfo: ‘Gizli Bilgi’ };<\/p>\n
const handler = {
\n get(target, prop) {
\n if (prop === ‘privateInfo’) {
\n throw new Error(‘\u00d6zel bilgiye eri\u015fim izni yok!’);
\n }
\n return target[prop];
\n }
\n};<\/p>\n
const proxy = new Proxy(target, handler);<\/p>\n
console.log(proxy.name); \/\/ ‘Fatih Soysal’
\nconsole.log(proxy.privateInfo); \/\/ Hata: \u00d6zel bilgiye eri\u015fim izni yok!
\n“`<\/p>\n
Bu \u00f6rnekte, `privateInfo` \u00f6zelli\u011fine eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda bir hata f\u0131rlatan bir proxy olu\u015fturuyoruz.<\/p>\n
Bir proxy, bir \u00f6zelli\u011fe de\u011fer atand\u0131\u011f\u0131nda ba\u015fka bir \u00f6zelli\u011fin g\u00fcncellenmesini otomatikle\u015ftirmek i\u00e7in kullan\u0131labilir.<\/p>\n
“`javascript
\nconst target = { name: ‘Fatih Soysal’, age: 30 };<\/p>\n
const handler = {
\n set(target, prop, value) {
\n if (prop === ‘age’) {
\n target.age = value;
\n target.birthYear = 2023 – value;
\n return true;
\n }
\n return false;
\n }
\n};<\/p>\n
const proxy = new Proxy(target, handler);<\/p>\n
proxy.age = 35;<\/p>\n
console.log(proxy.birthYear); \/\/ 1988
\n“`<\/p>\n
Bu \u00f6rnekte, `age` \u00f6zelli\u011fine bir de\u011fer atand\u0131\u011f\u0131nda `birthYear` \u00f6zelli\u011finin otomatik olarak g\u00fcncellendi\u011fi bir proxy olu\u015fturuyoruz.<\/p>\n
JavaScript Proxy ve Reflect, nesneleri dinamik olarak kontrol etmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Bunlar\u0131 geli\u015ftirme zaman\u0131 hata ay\u0131klama, veri gizleme, nesne validasyonu ve otomatik atama gibi \u00e7e\u015fitli senaryolarda kullanabilirsiniz. Reflect API, Proxy’ler ile entegre olarak daha tutarl\u0131 ve g\u00fcvenli bir \u015fekilde nesneleri manip\u00fcle etmenizi sa\u011flar. Proxy ve Reflect, modern JavaScript uygulamalar\u0131nda nesne y\u00f6netimini geli\u015ftirmek i\u00e7in paha bi\u00e7ilmez ara\u00e7lard\u0131r.<\/p>\n