Bu eğitimde, örnekler yardımıyla JavaScript proxy'leri hakkında bilgi edineceksiniz.
JavaScript'te proxy'ler (proxy nesnesi), bir nesneyi sarmak ve okuma, ekleme, doğrulama vb. Gibi nesneye çeşitli işlemleri yeniden tanımlamak için kullanılır. Proxy, bir nesneye veya bir işleve özel davranış eklemenize olanak tanır.
Proxy Nesnesi Oluşturma
Proxy sözdizimi şöyledir:
new Proxy(target, handler);
Buraya,
new Proxy()- kurucu.target- proxy yapmak istediğiniz nesne / işlevhandler- nesnenin özel davranışını yeniden tanımlayabilir
Örneğin,
let student1 = ( age: 24, name: "Felix" ) const handler = ( get: function(obj, prop) ( return obj(prop) ? obj(prop) : 'property does not exist'; ) ) const proxy = new Proxy(student1, handler); console.log(proxy.name); // Felix console.log(proxy.age); // 24 console.log(proxy.class); // property does not exist
Burada get()yöntem, nesnenin özellik değerine erişmek için kullanılır. Ve özellik nesnede mevcut değilse, özellik mevcut değil döndürür.
Gördüğünüz gibi, nesne için yeni işlemler oluşturmak için bir proxy kullanabilirsiniz. Bir nesnenin belirli bir anahtara sahip olup olmadığını kontrol etmek ve o anahtara dayalı bir eylem gerçekleştirmek istediğinizde bir durum ortaya çıkabilir. Bu gibi durumlarda vekiller kullanılabilir.
Ayrıca boş bir işleyiciyi de geçebilirsiniz. Boş bir işleyici geçildiğinde, proxy orijinal bir nesne gibi davranır. Örneğin,
let student = ( name: 'Jack', age: 24 ) const handler = ( ); // passing empty handler const proxy1 = new Proxy(student, ()); console.log(proxy1); // Proxy (name: "Jack", age: 24) console.log(proxy1.name); // Jack
Proxy işleyicileri
Proxy, iki işleyici yöntemi sağlar get()ve set().
get () işleyicisi
get()Usul, bir hedef nesnenin özelliklerine ulaşmak için kullanılır. Örneğin,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( return obj(prop); ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack
Burada get()yöntem, nesneyi ve özelliği parametreleri olarak alır.
set () işleyici
set()Yöntem, bir nesnenin değerini ayarlamak için kullanılır. Örneğin,
let student = ( name: 'John' ) let setNewValue = ( set: function(obj, prop, value) ( obj(prop) = value; return; ) ); // setting new proxy let person = new Proxy(student, setNewValue); // setting new key/value person.age = 25; console.log(person); // Proxy (name: "John", age: 25)
Burada ageöğrenci nesnesine yeni bir özellik eklenir.
Proxy Kullanımları
1. Doğrulama için
Doğrulama için bir proxy kullanabilirsiniz. Bir anahtarın değerini kontrol edebilir ve bu değere göre bir eylem gerçekleştirebilirsiniz.
Örneğin,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( // check condition if (prop == 'name') ( return obj(prop); ) else ( return 'Not allowed'; ) ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack console.log(proxy.age); // Not allowed
Burada sadece öğrenci nesnesinin name özelliğine erişilebilir. Aksi takdirde, İzin verilmiyor değerini döndürür.
2. Bir Nesnenin Salt Okunur Görünümü
Başkalarının bir nesnede değişiklik yapmasına izin vermek istemediğiniz zamanlar olabilir. Bu gibi durumlarda, bir nesneyi yalnızca okunabilir hale getirmek için bir proxy kullanabilirsiniz. Örneğin,
let student = ( name: 'Jack', age: 23 ) const handler = ( set: function (obj, prop, value) ( if (obj(prop)) ( // cannot change the student value console.log('Read only') ) ) ); const proxy = new Proxy(student, handler); proxy.name = 'John'; // Read only proxy.age = 33; // Read only
Yukarıdaki programda nesne hiçbir şekilde değiştirilemez.
Biri nesneyi herhangi bir şekilde değiştirmeye çalışırsa, yalnızca Salt Okunur yazan bir dize alırsınız.
3. Yan Etkiler
Bir koşul karşılandığında başka bir işlevi çağırmak için bir proxy kullanabilirsiniz. Örneğin,
const myFunction = () => ( console.log("execute this function") ); const handler = ( set: function (target, prop, value) ( if (prop === 'name' && value === 'Jack') ( // calling another function myFunction(); ) else ( console.log('Can only access name property'); ) ) ); const proxy = new Proxy((), handler); proxy.name = 'Jack'; // execute this function proxy.age = 33; // Can only access name property
JavaScript proxy'si JavaScript ES6 sürümünden tanıtıldı . Bazı tarayıcılar, kullanımını tam olarak desteklemeyebilir. Daha fazla bilgi edinmek için JavaScript proxy'yi ziyaret edin.
