Object.observe()

Este articulo necesita una revisión técnica. Cómo puedes ayudar.

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

This is an experimental technology, part of the ECMAScript 2016 (ES7) proposal.
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

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" "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

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 36 No support No support 23 No support
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico No support 36 No support No support 23 No support

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: leopoldobrines7, madroneropaulo
 Última actualización por: leopoldobrines7,