Object.observe()

La méthode Object.observe() est utilisée afin d'observer de façon asynchrone les modifications apportées à un objet. Cette méthode fournit un flux d'information qui correspondent aux changement apportés à l'objet, dans l'ordre dans lequel ils se sont produits. Cependant, cette API a été dépréciée et retirée des navigateurs. À la place, il est préférable d'utiliser l'objet Proxy.

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

obj

L'objet qu'on souhaite observer.

callback

La fonction qui est appelée à chaque fois qu'un changement est effectué. Elle est invoquée avec l'argument suivant :

changes

Un tableau d'objets dont chaque élément représente une modification. Les propriétés de ces objets sont :

• name : Le nom de la propriété qui a été modifiée.
• object : L'objet modifié une fois le changement apporté.
• type : Une chaîne de caractères qui indique le type de modification qui a eu lieu. Elle peut valoir "add", "update", ou "delete".
• oldValue : Propriété présente uniquement pour les types "update" et "delete". Elle correspond à la valeur de l'objet avant la modification.

listeChangements

La liste des types de changements qu'on souhaite observer sur l'objet donné avec la fonction de retour donnée. Par défaut, si cet argument n'est pas utilisé, le tableau utilisé sera ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"].

L'objet qu'on souhaite observer.

La fonction callback est appelée chaque fois qu'une modification est apportée à obj avec comme argument le tableau listant l'ensemble des modifications, dans l'ordre dans lequel elles se sont produites.

var obj = {
  toto: 0,
  truc: 1
};

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

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

obj.toto = 'coucou';
// [{name: 'toto', object: , type: 'update', oldValue: 0}]

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

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

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

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

// Un objet représentant un utilisateur
var utilisateur = {
  id: 0,
  nom: 'Brendan Eich',
  titre: 'Mr.'
};

// Une fonction de salutation
function majSalutation() {
  user.greeting = 'Bonjour, ' + utilisateur.titre + ' ' + utilisateur.nom + ' !';
}
majSalutation();

Object.observe(utilisateur, function(changes) {
  changes.forEach(function(change) {
    // Pour chaque modification qui porte sur le nom ou le titre
    // on met à jour la salutation
    if (change.name === 'nom' || change.name === 'titre') {
      majSalutation();
    }
  });
});

// On représente un point sur un plan bidimensionnel
var point = {x: 0, y: 0, distance: 0};

function setPosition(pt, x, y) {
  // On effectue un changement personnalisé
  Object.getNotifier(pt).performChange('reposition', function() {
    var exDistance = pt.distance;
    pt.x = x;
    pt.y = y;
    pt.distance = Math.sqrt(x * x + y * y);
    return {exDistance: exDistance};
  });
}

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

setPosition(point, 3, 4);
// Distance modifiée : 5

Proposition de spécification (straw man proposal).

• Object.unobserve()
• Array.observe()
• Retrait de la proposition pour Object.Observer (en anglais)