Слушатель изменений значения свойства в объекте Javascript

Ответ 1

Какие часы действительно предназначены для проверки значений свойств. Например, вы можете проверить, что что-то является целым числом:

obj.watch('count', function(id, oldval, newval) {
    var val = parseInt(newval, 10);
    if(isNaN(val)) return oldval;
    return val;
});

Вы можете использовать его для проверки длины строки:

obj.watch('name', function(id, oldval, newval) {
    return newval.substr(0, 20);
});

Однако они доступны только в последних версиях javascript-механизма SpiderMonkey. Отлично, если вы используете Jaxer или встраиваете движок SpiderMonkey, но пока недоступны в своем браузере (если вы не используете используя FF3).

Ответ 2

Отъезд Object.defineProperty и Object.prototype.\__defineGetter__ (или \__defineSetter__), чтобы увидеть, как загорается эта функциональность.

Object.defineProperty должен быть доступен во всех современных браузерах в ближайшее время.

Ответ 3

Сейчас 2018 год, и ответы на этот вопрос немного устарели:

• Object.watch и Object.observe устарели и не должны использоваться.
• onPropertyChange - это обработчик событий элемента DOM, который работает только в некоторых версиях IE.
• Object.defineProperty позволяет вам сделать свойство объекта неизменным, что позволит вам обнаруживать предпринятые изменения, но также будет блокировать любые изменения.
• Определение сеттеров и геттеров работает, но требует большого количества установочного кода и не очень хорошо работает, когда вам нужно удалить или создать новые свойства.

Сегодня вы можете использовать объект Proxy для мониторинга (и перехвата) изменений, внесенных в объект. Он специально создан для того, что пытается сделать ФП. Вот основной пример:

var targetObj = {};
var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log('${key} set to ${value}');
      target[key] = value;
      return true;
  }
});

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

Единственными недостатками объекта Proxy являются:

1. Объект Proxy недоступен в более старых браузерах (например, IE11), и полизаполнение не может полностью копировать функции Proxy.
2. Прокси-объекты не всегда ведут себя должным образом со специальными объектами (например, Date) - Proxy объект лучше всего сочетать с простыми объектами или массивами.

Если вам нужно наблюдать за изменениями, внесенными во вложенный объект, вам нужно использовать специализированную библиотеку, такую как Observable Slim (которую я создал). Это работает так:

var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

Ответ 4

Вы можете ознакомиться с библиотекой Javascript Propery Events. Это небольшая библиотека, расширяющая Object.defineProperty с некоторыми вызывающими событиями, которые я сделал недавно. Он добавляет несколько свойств on[event], которые можно использовать как свойства on[event] для HTML-объектов. Он также имеет простую проверку типа, которая вызывает событие onerror, если он не работает.

Взяв ваш код, это приведет к чему-то вроде этого:

var o = {}
Object.defineProperty(o, "p", {
    value:1,
    writable:true,
    onchange:function(e){
        console.log("o." + e.target + " changed from " + e.previousValue + " to " + e.returnValue);
    }
})

Ответ 5

Вы можете использовать setInterval

Object.prototype.startWatch = function (onWatch) {

    var self = this;

    if (!self.watchTask) {
        self.oldValues = [];

        for (var propName in self) {
            self.oldValues[propName] = self[propName];
        }


        self.watchTask = setInterval(function () {
            for (var propName in self) {
                var propValue = self[propName];
                if (typeof (propValue) != 'function') {


                    var oldValue = self.oldValues[propName];

                    if (propValue != oldValue) {
                        self.oldValues[propName] = propValue;

                        onWatch({ obj: self, propName: propName, oldValue: oldValue, newValue: propValue });

                    }

                }
            }
        }, 1);
    }



}

var o = { a: 1, b: 2 };

o.startWatch(function (e) {
    console.log("property changed: " + e.propName);
    console.log("old value: " + e.oldValue);
    console.log("new value: " + e.newValue);
});

Ответ 6

Object.defineProperty

обещание

удалите Promise и сохраняйте обратный вызов, только если Promise не поддерживается в вашем целевом браузере

Важный:

1) Помните об асинхронном поведении при использовании обещания.

2) Object.defineProperty не вызывает обратный вызов, а только оператор присваивания '='

Object.onPropertySet = function onPropertySet(obj, prop, ...callback_or_once){
    let callback, once;
    for(let arg of callback_or_once){
        switch(typeof arg){
        case "function": callback = arg; break;
        case "boolean": once = arg; break;
        }
    }


    let inner_value = obj[prop];
    let p = new Promise(resolve => Object.defineProperty(obj, prop, {
        configurable: true,
        // enumerable: true,
        get(){ return inner_value; },
        set(v){
            inner_value = v;
            if(once){
                Object.defineProperty(obj, prop, {
                    configurable: true,
                    // enumerable: true,
                    value: v,
                    writable: true,
                });
            }
            (callback || resolve)(v);
        }
    }));
    if(!callback) return p;
};

// usage
let a = {};
function sayHiValue(v){ console.log('Hi "${v}"'); return v; }

// do
Object.onPropertySet(a, "b", sayHiValue);
a.b = 2; // Hi "2"
a.b = 5; // Hi "5"

// or
Object.onPropertySet(a, "c", true).then(sayHiValue).then(v => {
    console.log(a.c); // 4 // because a.c is set immediatly after a.c = 3
    console.log(v); // 3 // very important: v != a.c if a.c is reassigned immediatly
    a.c = 2; // property "c" of object "a" is re-assignable by '=' operator
    console.log(a.c === 2); // true
});
a.c = 3; // Hi "3"
a.c = 4; // (Nothing)