Proxy, пастки
Що таке Proxy
Proxy - це обгортка над об'єктом (або функцією), яка перехоплює операції з ним (читання, запис, виклик і т.д.).
Створюється так:
javascript
const proxy = new Proxy(target, handler);target- оригінальний об'єкт (той, з яким ми хочемо працювати);handler- об'єкт з "пастками" (англ. traps) - спеціальними методами-перехоплювачами, які описують, як реагувати на різні операції.
Навіщо потрібні проксі
Проксі дозволяють втручатися в базову поведінку об'єктів, наприклад:
- логувати доступ до властивостей;
- валідувати дані при записі;
- створювати "реактивні" об'єкти (як у Vue);
- автоматично підвантажувати значення;
- захищати приватні дані.
Приклад - логування всіх звернень до об'єкта:
javascript
const user = { name: "Tim", age: 25 };
const proxy = new Proxy(user, {
get(target, prop) {
console.log(`Читають властивість "${prop}"`);
return target[prop];
}
});
console.log(proxy.name); // Лог: Читають властивість "name"Що робить пастка get
get(target, prop, receiver) - спрацьовує, коли до властивості об'єкта звертаються:
javascript
proxy.name;
proxy["age"];Вона дозволяє:
- контролювати, що повертається при читанні;
- підставляти значення за замовчуванням;
- робити обчислювані властивості;
- приховувати певні поля.
Приклад:
javascript
const user = { name: "Tim" };
const proxy = new Proxy(user, {
get(target, prop) {
if (prop === "greet") {
return `Привіт, ${target.name}!`;
}
return target[prop] ?? "Немає такої властивості";
}
});
console.log(proxy.name); // "Tim"
console.log(proxy.greet); // "Привіт, Tim!"
console.log(proxy.age); // "Немає такої властивості"Що робить пастка set
set(target, prop, value, receiver) - спрацьовує, коли ми присвоюємо значення:
javascript
proxy.age = 30;Вона дозволяє:
- валідувати нові дані;
- забороняти запис;
- автоматично змінювати значення;
- викликати побічні ефекти (реактивність, логування тощо).
Приклад:
javascript
const user = {};
const proxy = new Proxy(user, {
set(target, prop, value) {
if (prop === "age" && typeof value !== "number") {
throw new TypeError("Вік має бути числом!");
}
target[prop] = value;
console.log(`Властивість "${prop}" встановлено в ${value}`);
return true; // обов'язково повернути true, якщо все пройшло успішно
}
});
proxy.age = 25; // Лог: Властивість "age" встановлено в 25
proxy.name = "Tim";
proxy.age = "багато"; // TypeErrorПідсумок
| Компонент | Призначення |
|---|---|
Proxy(target, handler) | Створює обгортку над об'єктом |
target | Оригінальний об'єкт |
handler | Об'єкт з пастками (методами-перехоплювачами) |
get | Перехоплює читання властивості |
set | Перехоплює запис властивості |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.