Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить об'єкт Proxy?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`Proxy` - це один із найпотужніших і "магічних" інструментів у JavaScript.
Він дозволяє **перехоплювати і перевизначати поведінку об'єктів** -
тобто ставати "між" об'єктом і його використанням.

---

## Що таке Proxy:

`Proxy` - це **обгортка навколо об'єкта**,
яка дозволяє **перехоплювати операції з ним**: читання, запис, видалення властивостей, виклики функцій і т.д.

Можна "перевизначити" поведінку об'єкта - як він реагує на `obj.prop`, `obj[key]`, `delete obj.x`, `in obj` і багато іншого.

---

## Синтаксис:

```javascript
const proxy = new Proxy(target, handler);
```

| Аргумент | Опис |
|---|---|
| `target` | оригінальний об'єкт, який обгортаємо |
| `handler` | об'єкт з "пастками" (функціями-перехоплювачами) |

---

## Найпростіший приклад:

```javascript
const user = { name: "Alice", age: 25 };

const proxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Доступ до властивості "${prop}"`);
    return target[prop];
  }
});

console.log(proxy.name); // Доступ до властивості "name" -> Alice
```

Кожного разу, коли відбувається `proxy.name`,
виклик іде через **пастку** `get()`,
а не напряму в об'єкт.

---

## Основні "пастки" (traps):

| Пастка | Перехоплює | Приклад |
|---|---|---|
| `get(target, prop)` | читання властивості | `proxy.x` |
| `set(target, prop, value)` | запис властивості | `proxy.x = 10` |
| `has(target, prop)` | оператор `in` | `"x" in proxy` |
| `deleteProperty(target, prop)` | `delete proxy.x` |  |
| `ownKeys(target)` | `Object.keys(proxy)` |  |
| `apply(target, thisArg, args)` | виклик функції | `proxy()` |
| `construct(target, args)` | виклик через `new` | `new proxy()` |

---

## Приклад: логування змін

```javascript
const user = { name: "Alice" };

proxy.name = "Bob"; // Змінено name: Alice -> Bob
```

Тепер ти можеш "ловити" всі зміни в об'єкті.

---

## Приклад: захист від видалення властивостей

```javascript
const obj = { secret: 42 };

const proxy = new Proxy(obj, {
  deleteProperty(target, prop) {
    console.log(`Видалення заборонено: ${prop}`);
    return false;
  }
});

delete proxy.secret; // "Видалення заборонено: secret"
```

---

## Приклад: валідація даних

```javascript
const user = {};

proxy.age = 30;  // OK
proxy.age = "thirty"; // TypeError
```

Можна навісити "правила" на запис властивостей - чудова техніка для валідації даних.

---

## Приклад: значення за замовчуванням

```javascript
const data = { a: 1 };

const proxy = new Proxy(data, {
  get(target, prop) {
    return prop in target ? target[prop] : "Немає даних";
  }
});

console.log(proxy.a); // 1
console.log(proxy.b); // "Немає даних"
```

Тепер доступ до неіснуючої властивості не видає `undefined`,
а повертає гарне значення за замовчуванням.

---

## Приклад: спостерігач (reactive data, як у Vue.js)

```javascript
function reactive(obj) {
  return new Proxy(obj, {
    set(target, prop, value) {
      console.log(`Оновлено ${prop}: ${value}`);
      target[prop] = value;
      return true;
    }
  });
}

const state = reactive({ count: 0 });
state.count++; // "Оновлено count: 1"
```

Саме так реалізовані реактивні дані у фреймворках (Vue, MobX та ін.)

---

## Приклад: перехоплення виклику функції

```javascript
function sum(a, b) {
  return a + b;
}

console.log(proxy(2, 3)); // Виклик з аргументами: 2,3 -> 10
```

Можна обгортати навіть **функції**,
змінюючи їхню поведінку "на льоту".

---

## Навіщо потрібен Proxy:

Логування та відлагодження
Валідація даних
Реактивні об'єкти (наприклад, Vue.js)
Lazy-loading (лінива ініціалізація)
Безпечні "readonly" структури
Створення API з "магічними" властивостями

---

## Коротко:

| Властивість | Proxy |
|---|---|
| Що робить | Перехоплює операції з об'єктом |
| Працює з | Об'єктами і функціями |
| Використовується для | логування, валідації, реактивності |
| Змінює оригінал? | Ні, обгортає його |
| Приклади пасток | `get`, `set`, `apply`, `deleteProperty`, `construct` |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати646 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.