Що таке Proxy Object в JavaScript
Proxy — це вбудований об'єкт у JavaScript, який дозволяє перехоплювати та переналаштовувати поведінку інших об'єктів. Ви можете "обернути" об'єкт і контролювати доступ до його властивостей, їх модифікацію, видалення, виклики функцій та багато іншого.
Простими словами, Proxy — це як "шар" між об'єктом та його використанням.
Синтаксис
javascript
const proxy = new Proxy(target, handler);target— об'єкт, який ви обгортаєте.handler— об'єкт з функціями-перехоплювачами (так званими "пастками"), наприклад:get,set,has,deleteProperty.
Приклад: логування доступу до властивостей
javascript
const user = { name: "Alice", age: 25 };
const proxy = new Proxy(user, {
get(target, prop) {
console.log(`Reading property "${prop}"`);
return target[prop];
},
});
console.log(proxy.name); // Reading property "name" → "Alice"Загальновживані пастки
| Пастка | Опис |
|---|---|
get() | Читання пропси |
set() | Запис значення у властивість |
has() | Оператор in |
deleteProperty() | Видалення пропси (delete) |
apply() | Виклик функції |
construct() | Виклик через new |
defineProperty() | Робота з Object.defineProperty() |
getOwnPropertyDescriptor() | Отримання дескриптора пропси |
Приклад: валідація значень
javascript
const user = {
name: "Alice",
age: 25
};
const validatedUser = new Proxy(user, {
set(target, prop, value) {
if (prop === "age" && typeof value !== "number") {
throw new TypeError("Age must be a number");
}
target[prop] = value;
return true;
}
});
validatedUser.age = 30; // OK
validatedUser.age = "много"; // ErrorКоли використовувати Proxy
- Для реактивності даних (Vue, MobX)
- Для валідації та логування
- Для створення динамічних API
- Для додавання метаінформації при доступі до об'єктів
- Для перехоплення помилок або захисту об'єкта від неналежного використання
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.