Yıllar geçtikçe JavaScript güçlü ve uyarlanabilir bir programlama diline dönüştü ve geliştiricilerin değişen ihtiyaçlarını karşılamak için sürekli olarak gelişti. Nispeten yeni gelişmelerden biri, programcılara diğer nesnelerdeki önemli işlemleri yakalayabilen ve değiştirebilen güçlü ve esnek nesneler oluşturma yetkisi veren Proxy nesnesidir. Bu makale, sözdizimini, niteliklerini, tipik uygulamalarını, güçlü yönlerini, sınırlamalarını, açıklayıcı örneklerini ve önerilen yaklaşımları kapsayacak şekilde Proxy'nin yeteneklerini ayrıntılı olarak ele almaktadır. JavaScript'te Proxy nedir? Proxy, başka bir nesneyi saran ve onun üzerindeki özelliklere erişme, atama ve silme gibi temel işlemleri engelleyen bir nesnedir. Proxy, geliştiricilerin daha çok yönlü ve sağlam kod yazmasına olanak tanıyan, JavaScript'in önemli bir yönüdür. Bu makalenin amacı, JavaScript'te Proxy'nin sözdizimini, özelliklerini, faydalarını, dezavantajlarını, çizimlerini ve önerilen tekniklerini kapsayan kapsamlı bir anlayış sunmaktır. Proxy'nin Sözdizimi ve Özellikleri JavaScript'in Proxy'si, diğer nesneler üzerinde gerçekleştirilen temel işlemleri değiştirebilen ve özelleştirebilen nesnelerin oluşturulmasına olanak tanıyan bir yetenektir. Proxy Nesnesi Oluşturma Bir Proxy nesnesi oluşturmak için iki bileşen gereklidir: bir hedef nesne ve bir işleyici nesne. Hedef nesne, operasyonların durdurulacağı nesnedir; işleyici nesne ise bu operasyonları yakalamak için kullanılan tuzakları veya yöntemleri tutmaktan sorumludur. Temel bir Proxy nesnesinin nasıl oluşturulacağını gösteren bir örnek: const target = { name: 'John', age: 25, }; const handler = { get: function(target, prop) { console.log(`Getting property ${prop}`); return target[prop]; }, }; const proxy = new Proxy(target, handler); console.log(proxy.name); // Getting property name // John Bu örnekte iki özelliğe sahip bir hedef nesne oluşturuyoruz: ad ve yaş. Ayrıca hedef nesnedeki bir özelliği okumaya yönelik her türlü çabayı yakalamak için get trap içeren bir işleyici nesnesi de oluştururuz. Daha sonra hedef ve handler nesnelerini Proxy yapıcısına sağlayarak bir Proxy nesnesi üretiyoruz. Son olarak, get tuzağını çağıran ve konsola bir mesaj gönderen Proxy nesnesinin name özelliğini alırız. Tuzaklar ve davranışları Tuzaklar, hedef nesne üzerindeki işlemleri engelleyen yöntemlerdir. Proxy nesnesiyle kullanabileceğiniz get, set, has, deleteProperty ve daha fazlasını içeren çeşitli tuzaklar vardır. En sık kullanılan tuzaklardan bazılarına kısa bir genel bakış: : Bu tuzak, hedef nesnedeki bir özelliği okuma girişimlerini engeller. İki argüman alır: hedef nesne ve erişilen özellik. Tuzak, özelliğin değerini döndürür. get : Bu tuzak, hedef nesne üzerinde bir özellik oluşturmaya yönelik her türlü çabayı yakalar. Üç parametre gerektirir: hedef nesnenin kendisi, kurulmakta olan özellik ve bu özelliğin güncellenmiş değeri. Mekanizma, oluşturulmakta olan değeri değiştirme yeteneğine sahiptir veya değerin oluşturulmasını yasaklayacak bir hata üretebilir. set : Bu tuzak, hedef nesnede bir özelliğin mevcut olup olmadığını kontrol etme girişimlerini engeller. İki argüman alır: hedef nesne ve kontrol edilen özellik. Tuzak, özelliğin mevcut olup olmadığını belirten bir boole değeri döndürür. has : Bu tuzak, hedef nesneden bir özelliği silme girişimlerini engeller. İki argüman alır: hedef nesne ve silinen özellik. Tuzak, özelliği silebilir veya özelliğin silinmesini önlemek için hata atabilir. deleteProperty Geri Alınabilir Proxy'ler Proxy nesneleri, geçersiz kılınmalarına olanak tanıyan büyüleyici bir özelliğe sahiptir, bu da tuzaklarının artık hedef nesne üzerindeki işlemleri engellememesine neden olur. Geçersiz kılınabilecek bir Proxy nesnesi oluşturmak için işlevini kullanın. Proxy.revocable() İşte bir örnek: const target = { name: 'John', age: 25, }; const handler = { get: function(target, prop) { console.log(`Getting property ${prop}`); return target[prop]; }, }; const {proxy, revoke} = Proxy.revocable(target, handler); console.log(proxy.name); // Getting property name // John revoke(); console.log(proxy.name); // Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked Bu örnekte, yöntemini kullanarak iptal edilebilir bir Proxy nesnesi oluşturuyoruz. Daha sonra get tuzağını tetikleyen ve konsola bir mesaj kaydeden Proxy nesnesinin name özelliğine erişiriz. Daha sonra yöntemini kullanarak Proxy nesnesini iptal ederiz; bu, Proxy nesnesindeki özelliklere erişmeye yönelik sonraki girişimlerin başarısız olacağı anlamına gelir. Proxy.revocable() revoke() Vekaleten Miras Proxy nesnelerinin bir başka ilginç özelliği de JavaScript'te miras kalıplarını uygulamak için kullanılabilmesidir. Bir Proxy nesnesini başka bir nesnenin prototipi olarak kullanarak özellik aramalarına müdahale edebilir ve prototip zincirinin davranışını özelleştirebilirsiniz. İşte bir örnek: const parent = { name: 'John', }; const handler = { get: function(target, prop) { console.log(`Getting property ${prop}`); if (!(prop in target)) { return Reflect.get(parent, prop); } return target[prop]; }, }; const child = new Proxy({}, handler); console.log(child.name); // Getting property name // John child.name = 'Bob'; console.log(child.name); // Getting property name // Bob console.log(parent.name); // John Bu örnekte bir ana nesne tanımlanmıştır ve bir name niteliğine sahiptir. Daha sonra, alt nesnenin özelliklerine yönelik okuma isteklerini önleyen get trap'li bir işleyici nesnesi yaratırız. Tuzak, özelliğin alt nesnede mevcut olmaması durumunda ana nesneye geri dönmek için Reflect.get() yöntemini kullanır. Daha sonra, prototip olarak bir Proxy nesnesi ve işleyici olarak işleyici nesnesini kullanarak bir alt nesne oluştururuz. Son olarak, alt nesnenin name özelliğine erişir ve onu değiştiririz; bu, tuzakları alma ve ayarlamayı etkinleştirir ve mesajları konsola kaydeder. Proxy kullanan gerçek hayattan örnekler Önbelleğe almak Proxy'nin kullanım örneklerinden biri pahalı işlev çağrılarını önbelleğe almaktır. Bu örnekte, bir işlev çağrısının sonucunu, argümanlarına dayalı olarak önbelleğe alan bir Proxy nesnesi oluşturuyoruz. function calculateCost(price, taxRate) { console.log('Calculating cost...'); return price * (1 + taxRate); } const cache = new Map(); const proxy = new Proxy(calculateCost, { apply(target, thisArg, args) { const key = args.join('-'); if (cache.has(key)) { console.log('Returning cached result...'); return cache.get(key); } else { const result = Reflect.apply(target, thisArg, args); cache.set(key, result); return result; } }, }); console.log(proxy(10, 0.2)); // Calculating cost... 12 console.log(proxy(10, 0.2)); // Returning cached result... 12 console.log(proxy(20, 0.2)); // Calculating cost... 24 console.log(proxy(20, 0.3)); // Calculating cost... 26 console.log(proxy(20, 0.3)); // Returning cached result... 26 Bu örnekte, fiyatı ve vergi oranını alıp vergiyle birlikte maliyeti döndüren, adında bir fonksiyon tanımlıyoruz. Daha sonra sınıfını kullanarak bir önbellek nesnesi oluşturuyoruz. calculateCost Map Daha sonra, tuzağını kullanarak işlev çağrılarını engelleyen adı verilen bir Proxy nesnesi oluşturuyoruz. tuzağı, işlev her çağrıldığında çağrılır ve işlev argümanlarını bir dizi olarak alır. Argümanları bir önbellek anahtarı oluşturmak için kullanırız ve sonucun zaten önbellekte olup olmadığını kontrol ederiz. Eğer öyleyse, önbelleğe alınan sonucu döndürürüz. Aksi takdirde sonucu hesaplayıp önbellekte saklarız. apply proxy apply Son olarak, farklı argümanlar kullanarak fonksiyonunu çağırıyoruz ve sonucun, aynı argümanlara sahip sonraki çağrılar için önbellekte saklandığını gözlemliyoruz. proxy Doğrulama Proxy'nin başka bir kullanım durumu da nesne özelliklerini doğrulamaktır. Bu örnekte, bir dize özelliğinin uzunluğunu doğrulayan bir Proxy nesnesi oluşturuyoruz. const user = { name: 'John', password: 'secret', }; const proxy = new Proxy(user, { set(target, prop, value) { if (prop === 'password' && value.length < 8) { throw new Error('Password must be at least 8 characters long'); } target[prop] = value; return true; }, }); console.log(proxy.name); // John console.log(proxy.password); // secret proxy.password = '12345678'; console.log(proxy.password); // 12345678 proxy.password = '123'; // Error Bu örnekte isimli bir nesneyi ve özelliği ile tanımlıyoruz. Daha sonra, tuzağı kullanarak özellik atamalarını engelleyen adı verilen bir Proxy nesnesi yaratırız. trap, bir özellik atandığında çağrılır ve özellik adını, yeni değeri ve hedef nesneyi alır. user name password set proxy set Atanan özelliğin özelliği olup olmadığını ve değerin 8 karakterden kısa olup olmadığını kontrol etmek için trap'i kullanırız. Eğer öyleyse hata atarız. Aksi halde hedef nesnenin özellik değerini ayarlıyoruz. password set özelliğine çeşitli değerler atamak için nesnesini kullanırız ve uzunluğu 8 karakterin altındaki herhangi bir değerin bir hatayı tetiklediğini unutmayın. password proxy Kerestecilik Proxy'nin diğer bir yaygın kullanım durumu, nesne özelliği erişimlerini ve atamalarını günlüğe kaydetmektir. Bu örnekte, özellik erişimlerini ve atamalarını günlüğe kaydeden bir Proxy nesnesi oluşturuyoruz. const user = { name: 'John', email: 'john@example.com', }; const proxy = new Proxy(user, { get(target, prop) { console.log(`Getting ${prop} property`); return target[prop]; }, set(target, prop, value) { console.log(`Setting ${prop} property to ${value}`); target[prop] = value; return true; }, }); console.log(proxy.name); // Getting name property -> John proxy.email = 'bob@example.com'; // Setting email property to bob@example.com console.log(proxy.email); // Getting email property -> bob@example.com Bu örnekte, adı verilen bir nesneyi, ve özelliğiyle tanımlıyoruz. Daha sonra ve tuzaklarını kullanarak özellik erişimlerini ve atamalarını engelleyen adı verilen bir Proxy nesnesi yaratırız. user name email get set proxy trap, bir özelliğe her erişildiğinde çağrılır ve özellik adını ve hedef nesneyi alır. Bu örnekte, özelliğe erişildiğini belirten bir mesajı konsola kaydediyoruz ve ardından hedef nesneden özellik değerini döndürüyoruz. get trap, bir özellik atandığında çağrılır ve özellik adını, yeni değeri ve hedef nesneyi alır. Bu örnekte, özelliğin atandığını belirten bir mesajı konsola kaydediyoruz ve ardından hedef nesne üzerinde özellik değerini ayarlıyoruz. set Son olarak nesnesini kullanarak çeşitli özelliklere erişip atadık ve mesajların konsola kaydedildiğini gözlemledik. proxy Proxy'nin Avantajları ve Sınırlamaları Proxy'nin Avantajları : Proxy nesneleri ile diğer nesnelerdeki temel işlemleri engelleyebilir ve özelleştirebilir, böylece erişim kontrolü, önbelleğe alma ve günlüğe kaydetme gibi gelişmiş özellikler oluşturmanıza olanak tanır. Özelleştirilebilir davranış : Proxy nesneleri, JavaScript'te miras kalıplarını uygulama yeteneği sunar; bu da daha çok yönlü ve ölçeklenebilir koda yol açabilir. Kalıtım : Proxy nesneleri oluşturulduktan sonra devre dışı bırakılabilir veya iptal edilebilir, bu da onları proxy nesnesinin kapsamını sınırlamak veya güvenlik nedenleriyle kullanışlı hale getirir. İptal edilebilir Proxy Sınırlamaları Proxy'nin uzun süredir bizimle birlikte olmasına rağmen tarayıcıların tüm sürümleri bu işlevi desteklemiyor. Üstelik Proxy kullanımı, özellikle de çok sık kullanıyorsanız uygulamanızın performansını olumsuz etkileyebilir. Proxy kullanmanın anlamını anlamak önemlidir. Kullanıcı girişinin önemli şekilde doğrulanması gibi uygulama açısından kritik anlarda buna güvenilmemelidir. Proxy Kullanımına İlişkin En İyi Uygulamalar : Kodunuza bir proxy uygulamadan önce, onun getirdiği kısıtlamaların ve bunların uygulamanızın hızını ve güvenliğini nasıl etkileyebileceğinin farkında olun. Kısıtlamaların farkında olun Proxy nesneleri kodunuzun performansını etkileyebileceğinden yalnızca kesinlikle gerekli olduğunda kullanılmalıdır. : Proxy nesnelerini kullanırken dikkatli bir şekilde test ettiğinizden ve olası beklenmeyen davranışlara karşı tetikte olduğunuzdan emin olun. Dikkatlice test edin : Kodunuzun okunmasını ve bakımını kolaylaştırmak için Proxy nesnelerini uygularken kabul edilen kurallara ve en iyi uygulamalara uyun. Normlara uyun Çözüm Makalede, kalıtım kalıpları ve iptal edilebilir Proxy nesneleri oluşturma yeteneği gibi Proxy'nin gelişmiş özellikleri ele alınmaktadır. Bir geliştirici olarak deneyim seviyeniz ne olursa olsun, JavaScript'te Proxy'yi anlamak, kodunuzu daha yüksek bir seviyeye yükseltmek için çok önemlidir. Uyarlanabilirliği ve gücü nedeniyle Proxy, karmaşık uygulamaları kolaylıkla oluşturmayı amaçlayan herhangi bir JavaScript geliştiricisi için kritik bir araç oluşturur.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

In your car, at home, or at work — Bosch technology shapes many areas of life.

JavaScript'te Proxy'nin Gücünü Anlamak

Çok uzun; Okumak

Aleksandr Guzenko

STORY’S CREDIBILITY

Code License

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

JavaScript'te Proxy'nin Gücünü Anlamak

Çok uzun; Okumak

Aleksandr Guzenko

STORY’S CREDIBILITY

Code License

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

İLGİLİ ÖYKÜLER