Как реагировать на изменения объекта В JavaScript обычные объекты не умеют уведомлять о своих изменениях, однако эту задачу можно решить с помощью Proxy Proxy — это специальный встроенный в язык объект-обёртка, который позволяет изменить поведение других объектов, перехватывая действия над ними new Proxy(target, handlers) создаёт прокси для объекта target, где handler содержит ловушки для перехвата операций Ловушек много — get, set, deleteProperty, has... (подробнее на MDN) — каждая из ловушек переопределяет реакцию объекта на взаимодействие с ним Например, можно переопределить поведение объекта при обращении к какому-нибудь из его свойств: const user = { name: "Денис", age: 23 }; const proxyUser = new Proxy(user, { get(target, key) { return key in target ? target[key] : "Не найдено"; } }); proxyUser.name // "Денис" proxyUser.city // "Не найдено" Но это лишь частный случай, можно сделать более утилитарный пример: const reactive = (obj, callback) => { return new Proxy(obj, { set(target, key, value) { target[key] = value; // обновляем значение callback(key, value); // вызываем реакцию return true; } }); }; // Используем: const state = reactive({ count: 0 }, (key, value) => { console.log(Свойство "${key}" изменилось:, value); }); state.count = 1; // Лог: "Свойство 'count' изменилось: 1" state.count = 5; // Лог: "Свойство 'count' изменилось: 5" Прикрутить сюда типы и рекурсивный вызов функции reactive на каждый вложенный объект и у вас почти получится свой vue.js 🗿 Сам Proxy — это крайне нишевый инструмент, особенно в экосистеме реакта, где его встретить крайне сложно. Обычно можно обойтись более простыми вещами, но знать про прокси тоже нужно, может и пригодится. По крайней мере, у меня такой кейс на практике всё же был В первую очередь прокси удобен конечно же для создания реактивных систем, но также его можно применять, например, для валидации свойств и логирования Удобно, что Proxy крайне прост и к нему можно прикрутить что угодно. Например, к прокси можно прилепить zod для валидации, как это сделано в zoxy. Тут вы ограничены лишь своей фантазией Если кратко: — Proxy — обёртка, которая позволяет переопределить реакцию на операцию для объекта — Переопределение поведения происходит при помощи "ловушек" Спасибо за прочтение, это важно для меня ❤️ @prog_way_blog — чат — #theory #useful #javascript #code #web #patterns