Object.observe()

Obsolète
Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.

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.

Syntaxe

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

Paramètres

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

Valeur de retour

L'objet qu'on souhaite observer.

Description

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.

Exemples

Enregistrer les différents types de modifications

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

Lier des données

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

Exemple : Enregistrer des changements personnalisés

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

Spécifications

Proposition de spécification (straw man proposal).{{WhyNoSpecEnd}}

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 36[3] Pas de support [1] Pas de support [2] 23 Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support 36[3] Pas de support [1] Pas de support [2] 23 Pas de support

[1] Voir bug 800355

[2] Voir la page de statut pour Microsoft Edge

[3] Déprécié à partir de Chrome 49, désactivée via un flag dans Chrome 50 et complètement retirée de Chrome 52.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,