Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Proxy, пастки». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`Proxy`** - це обгортка над об'єктом (або функцією), яка перехоплює операції з ним (читання, запис, виклик тощо). **Ключове:** проксі дозволяють втручатися в базову поведінку об'єктів - логувати доступ, валідувати дані при записі, створювати "реактивні" об'єкти та захищати приватні дані.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке **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` | Перехоплює запис властивості |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.