W tym samouczku dowiesz się o serwerach proxy JavaScript na podstawie przykładów.
W JavaScript, proxy (obiekt proxy) są używane do zawijania obiektu i ponownego definiowania różnych operacji w obiekcie, takich jak odczyt, wstawianie, walidacja itp. Proxy pozwala na dodanie niestandardowego zachowania do obiektu lub funkcji.
Tworzenie obiektu proxy
Składnia proxy to:
new Proxy(target, handler);
Tutaj,
new Proxy()- konstruktor.target- obiekt / funkcja, którą chcesz proxyhandler- może przedefiniować niestandardowe zachowanie obiektu
Na przykład,
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
Tutaj get()metoda jest używana do uzyskiwania dostępu do wartości właściwości obiektu. A jeśli właściwość nie jest dostępna w obiekcie, zwraca właściwość nie istnieje.
Jak widać, możesz użyć proxy do tworzenia nowych operacji dla obiektu. Może pojawić się przypadek, gdy chcesz sprawdzić, czy obiekt ma określony klucz i wykonać akcję opartą na tym kluczu. W takich przypadkach można użyć serwerów proxy.
Możesz również przekazać pusty program obsługi. Po przekazaniu pustej procedury obsługi proxy zachowuje się jak oryginalny obiekt. Na przykład,
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
Programy obsługi proxy
Proxy udostępnia dwie metody obsługi get()i set().
get () handler
get()Wykorzystywana jest do uzyskania dostępu do właściwości obiektu docelowego. Na przykład,
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
Tutaj get()metoda przyjmuje obiekt i właściwość jako parametry.
set () handler
set()Wykorzystywana jest do ustawiania wartości obiektu. Na przykład,
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)
W tym miejscu agedo obiektu studenta zostanie dodana nowa właściwość .
Zastosowania proxy
1. Do walidacji
Możesz użyć proxy do weryfikacji. Możesz sprawdzić wartość klucza i wykonać akcję na podstawie tej wartości.
Na przykład,
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
Tutaj dostępna jest tylko właściwość name obiektu studenta. W przeciwnym razie zwraca Niedozwolone.
2. Widok obiektu tylko do odczytu
Może się zdarzyć, że nie chcesz pozwolić innym na dokonywanie zmian w obiekcie. W takich przypadkach można użyć proxy, aby obiekt był tylko do odczytu. Na przykład,
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
W powyższym programie nie można w żaden sposób mutować obiektu.
Jeśli ktoś spróbuje zmutować obiekt w jakikolwiek sposób, otrzymasz tylko ciąg znaków tylko do odczytu.
3. Efekty uboczne
Możesz użyć proxy do wywołania innej funkcji, gdy warunek zostanie spełniony. Na przykład,
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 został wprowadzony z wersji JavaScript ES6 . Niektóre przeglądarki mogą nie w pełni obsługiwać jego użycie. Aby dowiedzieć się więcej, odwiedź stronę proxy JavaScript.
