В този урок ще научите за прокситата на JavaScript с помощта на примери.
В JavaScript прокситата (прокси обект) се използват за увиване на обект и предефиниране на различни операции в обекта, като четене, вмъкване, валидиране и др.
Създаване на прокси обект
Синтаксисът на прокси е:
new Proxy(target, handler);
Тук,
new Proxy()- конструкторът.target- обекта / функцията, която искате да проксиhandler- може да предефинира потребителското поведение на обекта
Например,
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
Тук get()методът се използва за достъп до стойността на свойството на обекта. И ако свойството не е налично в обекта, той връща свойството не съществува.
Както можете да видите, можете да използвате прокси за създаване на нови операции за обекта. Може да възникне случай, когато искате да проверите дали даден обект има определен ключ и да извършите действие въз основа на този ключ. В такива случаи могат да се използват пълномощници.
Можете също така да предадете празен манипулатор. Когато се предаде празен манипулатор, проксито се държи като оригинален обект. Например,
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 предоставя два метода за обработка get()и set().
get () манипулатор
В get()метода се използва за достъп до свойствата на целевия обект. Например,
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
Тук get()методът взема обекта и свойството като свои параметри.
set () манипулатор
В set()метода се използва за задаване на стойността на даден обект. Например,
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)
Тук ageкъм студентския обект се добавя ново свойство .
Използване на прокси
1. За валидиране
Можете да използвате прокси за валидиране. Можете да проверите стойността на ключ и да извършите действие въз основа на тази стойност.
Например,
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
Тук е достъпно само свойството name на студентския обект. В противен случай се връща Не е позволено.
2. Изглед само за четене на обект
Може да има моменти, когато не искате да позволите на други да правят промени в обект. В такива случаи можете да използвате прокси, за да направите обекта само четлив. Например,
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
В горната програма човек не може да мутира обекта по никакъв начин.
Ако някой се опита да мутира обекта по някакъв начин, ще получите само низ с надпис Само за четене.
3. Странични ефекти
Можете да използвате прокси, за да извикате друга функция, когато е изпълнено условие. Например,
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 прокси е въведен от версията на JavaScript ES6 . Някои браузъри може да не поддържат напълно използването му. За да научите повече, посетете JavaScript прокси.
