Object.observe()

This article needs an editorial review. How you can help.

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è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.

Sintaxi

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

Paràmetres

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

Descripció

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.

Exemples

Mostrant tots els sis tipus diferents

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

Enllaçar dades

// 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();
    }
  });
});

Tipus de canvi personalitzat

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

Especificacions

proposta de Strawman per ECMAScript 7.

Compatibilitat amb navegadors

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 36 Not supported [1] Not supported [2] 23 Not supported
Característica Android Chrome per Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic Not supported 36 Not supported [1] Not supported [2] 23 Not supported

[1]: Vegeu errada 800355

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

Vegeu també

Document Tags and Contributors

 Contributors to this page: llue
 Last updated by: llue,