Отслеживание изменений объекта

188
03 сентября 2021, 14:20

Как отследить изменения в объекте?

function OBJ(option) {
    Object.assign(this, {
        x: 16,
        y: 32
    }, option);
}

let obj = new OBJ();
obj.x = 64;

При создании объекта я создаю XML. При изменении значений объекта я хочу изменять эти данные и в XML. Как это лучше всего сделать?

obj.onchange = function() {
    { ... }
}
Answer 1

Как уже предложил JavaJunior можно использовать геттеры и сеттеры. Также можно воспользоваться Proxy. Что конкретно использовать Вам нужно решить самому исходя из Ваших задач и предпочтений.

Пример использования Proxy

var handler = { 
    get: function(target, name) { 
        console.log("GETTER [target: %o, name: %o, returns: %o]", target, name, target[name]); 
        return target[name]; 
    }, 
    set: function(target, name, value) { 
        console.log("SETTER [target: %o, name: %o, value: %o]", target, name, value); 
        if(name in target) { 
            target[name] = value; 
            return true; 
        } 
        return false; 
    } 
}; 
 
var obj = { 
  a: 0 
}; 
var p = new Proxy(obj, handler); 
 
p.a; 
p.a = 1; 
p.a; 
p.b;

Материалы по теме

  • Определение геттеров и сеттеров
  • документация глобального объекта Proxy
  • полифилы от команды Google Chrome и от Babel
  • более подробно о Proxy и Reflect
Answer 2

Как вариант используй инкапсуляцию - переменные сделай локальными, добавь сеттеры с требуемой логикой и гетеры.

Answer 3

var handler = { 
	 
    get: function(target, name) { 
        console.log("GETTER [target: %o, name: %o, returns: %o]", target, name, target[name]); 
        return target[name]; 
    }, 
	 
    set: function(target, name, value) { 
        console.log("SETTER [target: %o, name: %o, value: %o]", target, name, value); 
        if(name in target) { 
            target[name] = value; 
            return true; 
        } 
		 
        return false; 
    } 
} 
 
 
 
function OBJ(option) { 
 
    Object.assign(this, { 
        x: 16, 
        y: 32 
    }, option); 
 
    return new Proxy(this, handler); 
} 
 
 
 
let obj = new OBJ(); 
obj.x; 
obj.x = 64;

READ ALSO
Удаление элементов из state по таймеру
javascript

Удаление элементов из state по таймеру

Идея такая: есть локальный state (hook), в нем массив из четырех элементовНа экране есть кнопка добавления нового элемента в этот массив

 155
Uncaught ReferenceError: require is not defined. Как избавиться?
javascript

Uncaught ReferenceError: require is not defined. Как избавиться?

Собираю проект через GulpТакая проблема: написал код, после "прогона" через babel выдал ошибку: regeneratorRuntime is not defined

 223
Как передать дату в ActionCreator
javascript

Как передать дату в ActionCreator

У меня есть поле создание поста через input, где после нажатия на enter или кнопки опубликовать пост вызывается функция onAddPost

 213
Анимация набора текста на CSS
javascript

Анимация набора текста на CSS

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

 287