Object.observe()

El método Object.observe() es usado para observar de forma asíncrona cambios sobre un objeto.  Este método transmite información sobre cambios en el objeto, en el orden en que estos ocurren.

Sintaxis

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

Parámetros

obj

El objeto que será observado.

callback

La función llamada cada vez que un cambio es realizado. Esta función recibe el siguiente argumento:

changes

Una cadena (Array) de objetos, cada uno de los cuales representa un cambio. Las propiedades de estos objetos son:

• name: El nombre de la propiedad que fue cambiada.
• object: El objeto con el cambio ya realizado.
• type: Una cadena (String), indicando el tipo de cambio que ocurrió. Puede ser "add" (añadir), "update" (actualizar) o "delete" (borrar) .
• oldValue: Sólo válido para los tipos (type) "update" o "delete". Esta propiedad representa el valor antes de que haya ocurrido el cambio.

acceptList

La lista de tipos de cambios que serán observados en el objeto dado, y que serán pasados a la función callback dada. Si este parámetro es omitido, se utilizará de forma predeterminada la cadena (Array) ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"].

Descripción

La función callback es llamada o ejecutada cada vez que un cambio es aplicado sobre el objeto obj. Esta función es ejecutada con una cadena (Array) de todos los cambios sobre el objeto, en el orden en el que estos ocurrieron.

Ejemplos

Imprimir en consola los seis tipos diferentes de cambios en un objeto.

var obj = {
  foo: 0,
  baz: 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: 'baz', object: <obj>, type: 'reconfigure'},
//   {object: <obj>, type: 'preventExtensions'}
// ]

Enlace de datos

// Un modelo de objeto "usuario"
var user = {
  id: 0,
  name: 'Brendan Eich',
  title: 'Mr.'
};

// Crear un saludo para el usuario
function updateGreeting() {
  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // Cada vez que las propiedades "name" o "title" del objeto
    // "user" cambien, se ejecutará la función updateGreeting.
    if (change.name === 'name' || change.name === 'title') {
      updateGreeting();
    }
  });
});

Cambio de tipo personalizado

// A point on a 2D plane
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

Especificación Técnica (en inglés)

Strawman proposal for ECMAScript 7.

Compatibilidad en navegadores

Véase también

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