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
Compatibilité des navigateurs
No compatibility data found. Please contribute data for "javascript.builtins.Object.observe" (depth: 1) to the MDN compatibility data repository.