Object.observe()

El mètode Object.observe() s'utilitza per observar asincrònicament els canvis en un objecte. Proveeix una corrent de canvis en l'ordre en què es produeixen.

Object.observe(obj, callback[, acceptList])

obj

L'objecte que s'observa.

callback

La funció es crida cada cop que es realitzen canvis, amb l'argument següent:

changes

Un array d'objectes cadascún d'ells representa un canvi. Les propietats d'aquests objectes canvi són:

• name: El nom de la propietat que s'ha canviat.
• object: L'objecte canviat després d'haverse realitzat els canvis.
• type: Una cadena que indica el tipus de canvi que s'ha portat a terme: "add", "update", o "delete".
• oldValue: Només pels tipus "update" i "delete". El valor abans del canvi.

acceptList

La llista de tipus de canvis que s'han d'observar en l'objecte donat  callback. En cas d'ometre's, s'utilitzarà l'array ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"].

callback és cridat cada cop que es realitza un canvi a obj, amb un array de tots els canvis en l'ordre en que han succeït.

var obj = {
  foo: 0,
  bar: 1
};

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

obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]

obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]

delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]

Object.defineProperty(obj, 'foo', {writable: false});
// [{name: 'foo', object: <obj>, type: 'reconfigure'}]

Object.setPrototypeOf(obj, {});
// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}]

Object.seal(obj);
// [
//   {name: 'foo', object: <obj>, type: 'reconfigure'},
//   {name: 'bar', object: <obj>, type: 'reconfigure'},
//   {object: <obj>, type: 'preventExtensions'}
// ]

// Un model d'usuari
var user = {
  id: 0,
  name: 'Brendan Eich',
  title: 'Mr.'
};

// Crear una benvinguda per l'usuari
function updateGreeting() {
  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // Qualsevol canvi de nom del temps o títol, actualitzar la benvinguda
    if (change.name === 'name' || change.name === 'title') {
      updateGreeting();
    }
  });
});

// Un punt en un pla 2D
var point = {x: 0, y: 0, distance: 0};

function setPosition(pt, x, y) {
  // Performing a custom change
  Object.getNotifier(pt).performChange('reposition', function() {
    var oldDistance = pt.distance;
    pt.x = x;
    pt.y = y;
    pt.distance = Math.sqrt(x * x + y * y);
    return {oldDistance: oldDistance};
  });
}

Object.observe(point, function(changes) {
  console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
}, ['reposition']);

setPosition(point, 3, 4);
// Distance change: 5

Proposta de Strawman per ECMAScript 7.

[1]: Vegeu errada 800355

[2]: Vegeu rellevant entrada de l'estat de la plataforma MS Edge

• Object.unobserve()
• Array.observe()