Давайте будем приступать к практике работы с Proxy в Javascript и рассмотрим некоторые простые примеры. 

У меня есть простая html страница, я создам в ней некий элемент script, в которой мы напишем сейчас некий код. 

Предположим, что у нас есть некий объект person. 

let person = {
    name: "Vasya",
    age: 11
}

Мы создали некий Javascript объект, с которым можем взаимодействовать.

Если мы откроем эту страницу в браузере и в консоли обратимся к нашему объекту person, мы получим этот объект. 

Давайте создадим элемент div с id = test. Просто будет пустой элемент div. Давайте попробуем вывести в этот элемент значение из объекта person.

let el = document.getElementById('test');
el.innerHTML = person.name + '  ' + person.age

У нас выведится Vasya 11

Предположим, что теперь какими-то Javascript действиями, я изменю состояние нашего объекта. Например, изменим это через консоль браузера.

Наш объект сейчас содержит измененное значение, но странице как осталось старое значение, так и осталось.Такая проблема. Это проблема отсутствия реактивности данных. 

Данные не соответствуют представлению. 

Это произошло, т.к. добавление innerHTML происходит только при загрузке страницы, если мы меняем данные, данные никак не связаны с DOM разметкой. 

Как мы можем сделать так, что когда мы меняем данные, у нас бы менялась также и DOM разметка. 

Для этой цели нам как раз и может помочь Proxy. О том, как мы можем это сделать, давайте поговорим в следующем видео.