--- title: Object.observe() slug: Web/JavaScript/Reference/Objets_globaux/Object/observe tags: - JavaScript - Méthode - Object - Obsolete - Reference translation_of: Archive/Web/JavaScript/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 {{jsxref("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