JavaScript Proxy — перехоплення операцій з об'єктом

Proxy (у перекладі — посередник) обгортає об'єкт і перехоплює операції з ним: читання властивості, запис, видалення, перевірку існування.

правити

Загальний опис

Це найпотужніший інструмент метапрограмування в JavaScript. Посередник виглядає ззовні як звичайний об'єкт, але кожне звертання до нього спершу проходить через пастку (trap) — твою функцію.

Пастка get спрацьовує на читанні, set — на записі. Усередині можна робити що завгодно: підставити значення за замовчуванням замість undefined, заборонити запис, залогувати звертання, повідомити інтерфейс, що дані змінились.

Саме на цьому побудована реактивність сучасних фреймворків: ти пишеш state.count++, а фреймворк дізнається про це й перемальовує сторінку — бо між тобою й даними стоїть посередник.

правити

Порада

Пастка get — готове рішення для значень за замовчуванням: замість undefined віддавай нуль, порожній рядок чи зрозумілу помилку.

автор: NagarD правити

Нотатка

Оригінальний об'єкт лишається доступним. Посередник контролює лише свій шлях: хто має посилання на оригінал, обійде всі пастки.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const proxy = new Proxy(target, handler);

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
Proxy	49+	18+	10+	36+	12+	-

Підтримка: мобільні переглядачі

Переглядач
Proxy	49+	yes	yes	10+

Приклади

+ запропонувати свій приклад у пісочниці

const withDefault = new Proxy({}, {
    get: (target, key) => key in target ? target[key] : 0,
});

console.log(withDefault.missing); // 0, а не undefined

// валідація на записі
const user = new Proxy({}, {
    set(target, key, value) {
        if (key === 'age' && typeof value !== 'number') {
            throw new TypeError('Вік має бути числом');
        }

        target[key] = value;
        return true;
    },
});

user.age = 30;      // добре
// user.age = 'so';  // TypeError

// реактивність у три рядки
const state = new Proxy({ count: 0 }, {
    set(target, key, value) {
        target[key] = value;
        render();
        return true;
    },
});