From 844f5103992238c0c23203286dad16a466e89c97 Mon Sep 17 00:00:00 2001 From: julieng Date: Tue, 3 Aug 2021 08:03:09 +0200 Subject: move *.html to *.md --- .../javascript/reference/functions/get/index.html | 177 --------------------- .../javascript/reference/functions/get/index.md | 177 +++++++++++++++++++++ 2 files changed, 177 insertions(+), 177 deletions(-) delete mode 100644 files/fr/web/javascript/reference/functions/get/index.html create mode 100644 files/fr/web/javascript/reference/functions/get/index.md (limited to 'files/fr/web/javascript/reference/functions/get') diff --git a/files/fr/web/javascript/reference/functions/get/index.html b/files/fr/web/javascript/reference/functions/get/index.html deleted file mode 100644 index b999d2d36a..0000000000 --- a/files/fr/web/javascript/reference/functions/get/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: L'opérateur get -slug: Web/JavaScript/Reference/Functions/get -tags: - - ECMAScript 2015 - - ECMAScript 5 - - Functions - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/get -original_slug: Web/JavaScript/Reference/Fonctions/get ---- -
{{jsSidebar("Functions")}}
- -

La syntaxe get permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.

- -
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
- -

Syntaxe

- -
{get prop() { ... } }
-{get [expression]() { ... } }
- -

Paramètres

- -
-
prop
-
Le nom de la propriété à lier à la fonction.
-
expression
-
Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.
-
- -

Description

- -

Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un accesseur. Il n'est pas possible d'avoir simultanément un accesseur assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un accesseur et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.

- -

On notera que l'opérateur get :

- - - -

Un accesseur peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.

- -

Exemples

- -

Définir un accesseur avec l'opérateur get

- -

Ce code va créer une pseudo-propriété dernier de l'objet o qui va retourner la dernière entrée du tableau o.journal :

- -
var o = {
-  get dernier() {
-    if (this.journal.length > 0) {
-      return this.journal[this.journal.length - 1];
-    }
-    else {
-      return null;
-    }
-  },
-  journal: ["toto","actu"]
-}
-console.log(o.dernier); // "actu"
-
- -

Notez qu'essayer d'assigner à dernier une valeur ne le modifiera pas.

- -

Supprimer un accesseur avec l'opérateur delete

- -
delete o.dernier;
-
- -

Définir un accesseur sur des objets existants grâce à defineProperty

- -

Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.

- -
var o = { a:0 }
-
-Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
-
-console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)
- -

Utiliser un nom de propriété calculé

- -
var expr = "toto";
-
-var obj = {
-  get [expr]() { return "truc"; }
-};
-
-console.log(obj.toto); // "truc"
- -

Accesseurs mémoïsés

- -

Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).

- -

Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser des accesseurs intelligents « mémoïsés ». La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :

- - - -

Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.

- -

Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :

- -
get notifier() {
-  delete this.notifier;
-  return this.notifier = document.getElementById("bookmarked-notification-anchor");
-},
- -

Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction defineLazyGetter().

- -

get ou defineProperty ?

- -

Bien que le mot-clé get et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise les classes.

- -

Lorsqu'on utilise get, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.

- -
class Exemple {
-  get coucou() {
-    return 'monde';
-  }
-}
-
-const obj = new Exemple();
-console.log(obj.coucou);
-// "monde"
-console.log(Object.getOwnPropertyDescriptor(obj, 'coucou'));
-// undefined
-console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'coucou'));
-// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Ajout des noms de propriétés calculés.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -

{{Compat("javascript.functions.get")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/functions/get/index.md b/files/fr/web/javascript/reference/functions/get/index.md new file mode 100644 index 0000000000..b999d2d36a --- /dev/null +++ b/files/fr/web/javascript/reference/functions/get/index.md @@ -0,0 +1,177 @@ +--- +title: L'opérateur get +slug: Web/JavaScript/Reference/Functions/get +tags: + - ECMAScript 2015 + - ECMAScript 5 + - Functions + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/get +original_slug: Web/JavaScript/Reference/Fonctions/get +--- +
{{jsSidebar("Functions")}}
+ +

La syntaxe get permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.

+ +
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
+ +

Syntaxe

+ +
{get prop() { ... } }
+{get [expression]() { ... } }
+ +

Paramètres

+ +
+
prop
+
Le nom de la propriété à lier à la fonction.
+
expression
+
Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.
+
+ +

Description

+ +

Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un accesseur. Il n'est pas possible d'avoir simultanément un accesseur assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un accesseur et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.

+ +

On notera que l'opérateur get :

+ + + +

Un accesseur peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.

+ +

Exemples

+ +

Définir un accesseur avec l'opérateur get

+ +

Ce code va créer une pseudo-propriété dernier de l'objet o qui va retourner la dernière entrée du tableau o.journal :

+ +
var o = {
+  get dernier() {
+    if (this.journal.length > 0) {
+      return this.journal[this.journal.length - 1];
+    }
+    else {
+      return null;
+    }
+  },
+  journal: ["toto","actu"]
+}
+console.log(o.dernier); // "actu"
+
+ +

Notez qu'essayer d'assigner à dernier une valeur ne le modifiera pas.

+ +

Supprimer un accesseur avec l'opérateur delete

+ +
delete o.dernier;
+
+ +

Définir un accesseur sur des objets existants grâce à defineProperty

+ +

Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.

+ +
var o = { a:0 }
+
+Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
+
+console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)
+ +

Utiliser un nom de propriété calculé

+ +
var expr = "toto";
+
+var obj = {
+  get [expr]() { return "truc"; }
+};
+
+console.log(obj.toto); // "truc"
+ +

Accesseurs mémoïsés

+ +

Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).

+ +

Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser des accesseurs intelligents « mémoïsés ». La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :

+ + + +

Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.

+ +

Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :

+ +
get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById("bookmarked-notification-anchor");
+},
+ +

Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction defineLazyGetter().

+ +

get ou defineProperty ?

+ +

Bien que le mot-clé get et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise les classes.

+ +

Lorsqu'on utilise get, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.

+ +
class Exemple {
+  get coucou() {
+    return 'monde';
+  }
+}
+
+const obj = new Exemple();
+console.log(obj.coucou);
+// "monde"
+console.log(Object.getOwnPropertyDescriptor(obj, 'coucou'));
+// undefined
+console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'coucou'));
+// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Ajout des noms de propriétés calculés.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("javascript.functions.get")}}

+ +

Voir aussi

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