MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

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

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple36 — 52 Non Non Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Non Non Non Non Non Non Non

Voir aussi

Étiquettes et contributeurs liés au document

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