• Первый шаг в работе с JavaScript Proxy — создание прокси-объекта с помощью синтаксиса new Proxy(). Этот синтаксис позволяет определить целевой объект и объект-обработчик, содержащий ловушки — специальные методы, которые перехватывают операции с прокси и позволяют настраивать их поведение.
Например, ловушка get перехватывает доступ к свойствам прокси-объекта. Определив эту ловушку, можно настроить реакцию прокси при обращение к свойству. Аналогично, ловушка set перехватывает присвоение свойства, позволяя валидировать или изменить присвоенное значение.
• В целом, ловушки в контексте JavaScript Proxy — это специальные методы, которые действуют как посредники, перехватывая и позволяя настраивать такие действия с прокси-объектом, как доступ к свойствам и присвоение. Они предоставляют разработчикам тонкий контроль над поведением прокси, позволяя настраивать и манипулировать им по мере необходимости.
Пример:
const target = {
name: 'Hossein',
age: 26
};
const handler = {
get(target, property) {
console.log(`Getting property: ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting property: ${property} = ${value}`);
target[property] = value;
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Вывод: Получение свойства: name, Hossein
proxy.age = 30; // Вывод: Установка свойства: age = 26
console.log(proxy.age); // Вывод: получение свойства: age, 30▪️Здесь ловушка set перехватывает присвоение свойства прокси-объекту и регистрирует присвоенное свойство и значение, прежде чем изменить его в целевом объекте.
Используя эти и другие ловушки, можно эффективно настраивать и контролировать поведение прокси-объектов в соответствии с потребностями конкретной разработки.
Перехват операций с объектами с использованием прокси
• JavaScript Proxy позволяет перехватывать и настраивать различные операции с объектами. Рассмотрим несколько примеров.
Удаление свойства:
const target = {
name: 'Hossein',
age: 26
};
const handler = {
deleteProperty(target, property) {
console.log(`Deleting property: ${property}`);
delete target[property];
}
};
const proxy = new Proxy(target, handler);
delete proxy.age; // Вывод: Удаление свойства: age
console.log(proxy); // Вывод: { name: 'Hossein' }▪️В этом примере ловушка deleteProperty перехватывает удаление свойства прокси-объекта. Можно настроить поведение так, чтобы залоггировать удаляемое свойство и затем удалить его из целевого объекта.
• Вызов функции:
const target = {
sum: (a, b) => a + b
};
const handler = {
apply(target, thisArg, argumentsList) {
console.log(`Calling function: ${target.name}`);
return target.apply(thisArg, argumentsList);
}
};
const proxy = new Proxy(target.sum, handler);
console.log(proxy(2, 3)); // Вывод: Вызов функции: sum, 5▪️В этом случае ловушка apply перехватывает вызов функции прокси-объекта. Можно настроить поведение так, чтобы залоггировать имя функции перед ее вызовом с предоставленными аргументами.
📌Продолжение
@javascriptv