2

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

function OBJ(option) {

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



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

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

obj.onchange = function() {
    { ... }
}
3
  • Я думал о создании конструктора с set и get, но не знаю будет ли вызвано событие внутри этого конструктора при изменении значений. Может кто подскажет как реализовать?
    – Doofy
    8 окт 2019 в 21:15
  • раз вы создаете объект через Object.assign то сеттер и геттер не поможет вам, если только вы не будите писать на каждое св-во их, а у вас они могут приходить из параметров, то есть и там нужно прописывать их. В общем идея не очень, лучше смотреть в сторону Proxy
    – ThisMan
    9 окт 2019 в 9:22
  • @ThisMan добавил ответ где set, get и Object.assign
    – Doofy
    9 окт 2019 в 17:57

3 ответа 3

4

Как уже предложил 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;


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

1
  • Спасибо. То, что нужно :)
    – Doofy
    9 окт 2019 в 17:44
0

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

1
  • Пробовал после создания вопроса. Сеттер и геттер использует вызов функции. Например, я не могу использовать сеттер x, мне придётся писать set X() или менять на что-то другое, а опций много, на каждую функции писать не алё. Хотя вызов set x() работал, правда геттер по нему же undefined :)
    – Doofy
    9 окт 2019 в 6:18
0

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;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.