Obiekt.watch () dla wszystkich przeglądarek?

Ta wtyczka po prostu używa timera / interwału do wielokrotnego sprawdzania zmian w obiekcie. Może wystarczająco dobre, ale osobiście chciałbym więcej bezpośredniości jako obserwator.

Oto próba sprowadzenia watch/unwatch do IE: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html .

To zmienia składnię z Firefoksa sposób dodawania obserwatorów. Zamiast:

var obj = {foo:'bar'};
obj.watch('foo', fooChanged);

Robisz:

var obj = {foo:'bar'};
var watcher = createWatcher(obj);
watcher.watch('foo', fooChanged);

Aktualna Odpowiedź

Użyj nowego obiektu Proxy , który może obserwować zmiany w jego obiekcie docelowym.

let validator = {
    set: function(obj, prop, value) {
        if (prop === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('The age is not an integer');
            }
            if (value > 200) {
                throw new RangeError('The age seems invalid');
            }
        }

        // The default behavior to store the value
        obj[prop] = value;

        // Indicate success
        return true;
    }
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = 'young'; // Throws an exception
person.age = 300; // Throws an exception

Stara odpowiedź z 2015

Mogłeś użyć obiektu.observe() from ES7 . Oto polyfill. Ale Obiekt.funkcja observe() została anulowana . Przepraszam ludzi!

Odpowiedzi na to pytanie są trochę nieaktualne. obiekt.obserwuj i obiekt.observe są przestarzałe i nie powinny być używane.

Dzisiaj możesz użyć obiektu Proxy do monitorowania (i przechwytywania) zmian wprowadzonych w obiekcie. Oto podstawowy przykład:

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

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

Jeśli chcesz obserwować zmiany dokonane w zagnieżdżonym obiekcie, musisz użyć specjalistycznej biblioteki, takiej jak obserwowalna Szczupła który działa tak:

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}}]

Zauważ, że w Chrome 36 i wyższych można użyć Object.observe też. W rzeczywistości jest to część przyszłego standardu ECMAScript, a nie Funkcja specyficzna dla przeglądarki, jak Mozilla Object.watch.

Object.observe działa tylko na właściwościach obiektu, ale jest o wiele bardziej wydajny niż Object.watch (co jest przeznaczone do debugowania, a nie do użytku produkcyjnego).

var options = {};

Object.observe(options, function(changes) {
    console.log(changes);
});

options.foo = 'bar';

Możesz użyć obiektu.defineProperty .

Obserwuj obiekt bar w foo

Object.defineProperty(foo, "bar", {
  get: function (val){
      //some code to watch the getter function
  },

  set: function (val) {
      //some code to watch the setter function
  }
})

Myślę również, że teraz najlepszym rozwiązaniem jest użycie zegarka.JS, znajdź fajny samouczek tutaj: słuchaj / obserwuj zmiany obiektów lub tablic w Javascript (Zdarzenie zmiany właściwości w obiektach Javascript)