From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../objets_globaux/object/observe/index.html | 154 +++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/fr/web/javascript/reference/objets_globaux/object/observe/index.html (limited to 'files/fr/web/javascript/reference/objets_globaux/object/observe/index.html') diff --git a/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html b/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html new file mode 100644 index 0000000000..eb0e3ec8c0 --- /dev/null +++ b/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html @@ -0,0 +1,154 @@ +--- +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 +--- +
{{JSRef}}{{obsolete_header}}
+ +

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

Spécifications

+ +

Proposition de spécification (straw man proposal).

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.observe")}}

+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf