Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Bir JavaScript proxy nesnesi, orijinali değiştirmeden başka bir nesnenin davranışını yakalamanıza ve özelleştirmenize olanak tanır.

Proxy nesnelerini kullanarak verileri doğrulayabilir, ekstra işlevsellik sağlayabilir ve özelliklere ve işlevlere erişimi kontrol edebilirsiniz.

Proxy nesnelerinin kullanımları ve bunları JavaScript'te nasıl oluşturabileceğiniz hakkında her şeyi öğrenin.

Proxy Nesnesi Oluşturma

JavaScript'te, kullanarak proxy nesneleri oluşturabilirsiniz. vekilinşaatçı. Bu yapıcı iki bağımsız değişken alır: a hedef proxy'yi sarmak için nesne ve işleyici İşlemleri yürüttüğünüzde özellikleri proxy'nin davranışını tanımlayan nesne.

Bu bağımsız değişkenleri alır ve hedef nesnenin yerine kullanabileceğiniz bir nesne oluşturur. Oluşturulan bu nesne, özellikleri alma, ayarlama ve tanımlama gibi temel işlemleri yeniden tanımlayabilir. Bu proxy nesnelerini mülk erişimlerini günlüğe kaydetmek ve girdileri doğrulamak, biçimlendirmek veya sterilize etmek için de kullanabilirsiniz.

instagram viewer

Örneğin:

sabit orijinalNesne = {
foo: "çubuk"
}

sabit işleyici = {
elde etmek: işlev(hedef, özellik){
geri dönmek hedef[özellik];
},
ayarlamak: işlev(hedef, özellik, değer){
hedef[özellik] = değer;
}
};

sabit vekil = yenivekil(originalObject, işleyici)

Bu kod bir hedef nesne oluşturur, orijinalNesne, tek bir özellik ile, foove bir işleyici nesnesi, işleyici. İşleyici nesnesi iki özellik içerir, elde etmek Ve ayarlamak. Bu özellikler tuzaklar olarak bilinir.

Bir vekil nesne tuzağı, bir vekil nesne üzerinde belirli bir eylemi gerçekleştirdiğinizde çağrılan bir işlevdir. Tuzaklar, proxy nesnesinin davranışını yakalamanıza ve özelleştirmenize olanak tanır. Proxy nesnesinden bir özelliğe erişmek, elde etmek trap ve proxy nesnesinden bir özelliğin değiştirilmesi veya manipüle edilmesi ayarlamak tuzak.

Son olarak, kod ile bir proxy nesnesi oluşturur. vekil yapıcı Geçer orijinalNesne Ve işleyici sırasıyla hedef nesne ve işleyici olarak.

Proxy Nesnelerini Kullanma

Proxy nesnelerinin JavaScript'te birkaç kullanımı vardır ve bunlardan bazıları aşağıdaki gibidir.

Bir Nesneye İşlevsellik Ekleme

Varolan bir nesneyi sarmak ve günlüğe kaydetme gibi yeni işlevler eklemek için bir proxy nesnesi kullanabilirsiniz. Hata yönetimi, orijinal nesneyi değiştirmeden.

Yeni işlevler eklemek için vekil yapıcı ve durdurmak istediğiniz eylemler için bir veya daha fazla tuzak tanımlayın.

Örneğin:

sabit kullanıcıNesnesi = {
ilk adı: "Kennedy",
soy isim: "Martinler",
yaş: 20,
};

sabit işleyici = {
elde etmek: işlev(hedef, özellik){
konsol.kayıt(`Mülk almak'${özellik}"`);
geri dönmek hedef[özellik];
},
ayarlamak: işlev(hedef, özellik, değer){
konsol.kayıt(`Özellik ayarlanıyor"${özellik}"değer vermek"${değer}"`);
hedef[özellik] = değer;
},
};

sabit vekil = yenivekil(userObject, işleyici);

konsol.log (proxy.ilkAdı); // "FirstName" Kennedy özelliği alınıyor
konsol.log (proxy.soyadı); // "lastName" özelliği alınıyor Martins
proxy.age = 23; // özelliği ayarlama "yaş" değer vermek "23"

Bu kod bloğu, proxy tuzakları aracılığıyla işlevsellik ekler, elde etmek Ve ayarlamak. Şimdi, özelliğin bir özelliğine erişmeye veya bu özelliği değiştirmeye çalıştığınızda kullanıcıNesnesi, proxy nesnesi, özelliğe erişmeden veya özelliği değiştirmeden önce işleminizi konsola günlüğe kaydeder.

Bir Nesneye Ayarlamadan Önce Verileri Doğrulama

Verileri doğrulamak ve bir nesneye ayarlamadan önce belirli kriterleri karşıladığından emin olmak için proxy nesneleri kullanabilirsiniz. Bunu, bir doğrulama mantığını tanımlayarak yapabilirsiniz. ayarlamak tuzağa düşürmek işleyici nesne.

Örneğin:

sabit kullanıcıNesnesi = {
ilk adı: "Kennedy",
soy isim: "Martinler",
yaş: 20,
};

sabit işleyici = {
elde etmek: işlev(hedef, özellik){
konsol.kayıt(`Mülk almak'${özellik}"`);
geri dönmek hedef[özellik];
},
ayarlamak: işlev(hedef, özellik, değer){
eğer (
mülk "yaş" &&
bir çeşit değer == "sayı" &&
değer > 0 &&
değer < 120
) {
konsol.kayıt(`Özellik ayarlanıyor"${özellik}"değer vermek"${değer}"`);
hedef[özellik] = değer;
} başka {
fırlatmakyeniHata("Geçersiz parametre. Lütfen inceleyin ve düzeltin.");
}
},
};

sabit vekil = yenivekil(userObject, işleyici);
proxy.age = 21;

Bu kod bloğu, doğrulama kurallarını ekler. ayarlamak tuzak. için herhangi bir değer atayabilirsiniz. yaş mülkiyet bir kullanıcıNesnesi misal. Ancak, eklenen doğrulama kurallarıyla, age özelliğine yalnızca 0'dan büyük ve 120'den küçük bir sayıysa yeni bir değer atayabilirsiniz. Ayarlamaya çalıştığınız herhangi bir değer yaş Gerekli kriterleri karşılamayan özellik bir hatayı tetikler ve bir hata mesajı yazdırır.

Nesne Özelliklerine Erişimi Kontrol Etme

Bir nesnenin belirli özelliklerini gizlemek için proxy nesneleri kullanabilirsiniz. Bunu kısıtlama mantığını tanımlayarak yapın. elde etmek erişimi kontrol etmek istediğiniz mülkler için tuzaklar.

Örneğin:

sabit kullanıcıNesnesi = {
ilk adı: "Kennedy",
soy isim: "Martinler",
yaş: 20,
telefon: 1234567890,
e-posta: "[email protected]",
};

sabit işleyici = {
elde etmek: işlev(hedef, özellik){
eğer (mülk "telefon" || mülk "e-posta") {
fırlatmakyeniHata("Bilgilere erişim engellendi");
} başka {
konsol.kayıt(`Mülk almak'${özellik}"`);
geri dönmek hedef[özellik];
}
},
ayarlamak: işlev(hedef, özellik, değer){
konsol.kayıt(`Özellik ayarlanıyor"${özellik}"değer vermek"${değer}"`);
hedef[özellik] = değer;
},
};

sabit vekil = yenivekil(userObject, işleyici);

konsol.log (proxy.ilkAdı); // "FirstName" Kennedy özelliği alınıyor
konsol.log (proxy.e-posta); // Hata veriyor

Yukarıdaki kod bloğu, belirli kısıtlamalar ekler. elde etmek tuzak. Başlangıçta, mevcut tüm özelliklere şu adresten erişebilirsiniz: kullanıcıNesnesi. Eklenen kurallar, kullanıcının e-postası veya telefonu gibi hassas bilgilere erişimi engeller. Bu özelliklerden herhangi birine erişmeye çalışmak bir hatayı tetikleyecektir.

Diğer Proxy Tuzakları

bu elde etmek Ve ayarlamak tuzaklar en yaygın ve kullanışlı olanlardır, ancak başka 11 JavaScript proxy tuzağı vardır. Bunlar:

  • uygula: uygula trap, proxy nesnesinde bir işlev çağırdığınızda çalışır.
  • inşa etmek: inşa etmek trap, proxy nesnesinden bir nesne oluşturmak için new operatörünü kullandığınızda çalışır.
  • mülkü sil: mülkü sil kullandığınızda tuzak çalışır silmek proxy nesnesinden bir özelliği kaldırmak için operatör.
  • sahip olmak - sahip olmak kullandığınızda tuzak çalışır içinde proxy nesnesinde bir özelliğin olup olmadığını kontrol etmek için operatör.
  • kendiAnahtarları - kendiAnahtarları birini çağırdığınızda tuzak çalışır Object.getOwnPropertyNames veya Object.getOwnPropertySymbols proxy nesnesinde işlev.
  • getOwnPropertyDescriptor - getOwnPropertyDescriptor çağırdığınızda tuzak çalışır Object.getOwnPropertyDescriptor proxy nesnesinde işlev.
  • özelliği tanımla - özelliği tanımla çağırdığınızda tuzak çalışır Object.defineProperty proxy nesnesinde işlev.
  • uzantıları önleme - uzantıları önleme çağırdığınızda tuzak çalışır Object.preventExtensions proxy nesnesinde işlev.
  • Genişletilebilir - Genişletilebilir çağırdığınızda tuzak çalışır Object.isExtensible proxy nesnesinde işlev.
  • getPrototypeOf - getPrototypeOf çağırdığınızda tuzak çalışır Object.getPrototypeOf proxy nesnesinde işlev.
  • setPrototypeOf - setPrototypeOf çağırdığınızda tuzak çalışır Object.setPrototypeOf proxy nesnesinde işlev.

Gibi ayarlamak Ve elde etmek tuzaklar, orijinali değiştirmeden nesnenize yeni işlevsellik, doğrulama ve kontrol katmanları eklemek için bu tuzakları kullanabilirsiniz.

Proxy Nesnelerinin Eksileri

Proxy nesneleri, bir nesneye özel işlevsellik veya doğrulama eklemek için güçlü bir araç olabilir. Ancak bazı potansiyel dezavantajları da var. Böyle bir dezavantaj, perde arkasında neler olduğunu görmek zor olabileceğinden hata ayıklama zorluğudur.

Özellikle onlara aşina değilseniz proxy nesnelerinin kullanımı da zor olabilir. Kodunuzda proxy nesneleri kullanmadan önce bu dezavantajları dikkatlice düşünmelisiniz.