L'opérateur get

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

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

Exemple interactif

const obj = {  log: ["a", "b", "c"],  get latest() {    return this.log[this.log.length - 1];  },};console.log(obj.latest);// Expected output: "c"

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.

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 unaccesseur. Il n'est pas possible d'avoir simultanément unaccesseur assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser unaccesseur et unmutateur pour créer une sorte de pseudo-propriété.

On notera que l'opérateurget :

peut être identifié par un nombre ou une chaîne de caractères
ne doit pas posséder de paramètre (lire la pageChangement ES5 : les fonctionsd'accession etde mutation littérales doivent avoir maintenant zéro ou un paramètre.(en anglais) pour plus d'informations)
ne doit pas apparaître dans un littéral objet avec un autreget ou une autre propriété avec le même identifiant (les codes suivants :{ get x() { }, get x() { } } et{ x: ..., get x() { } } sont interdits).

Unaccesseur peut être supprimé grâce à l'opérateurdelete.

Exemples

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

Ce code va créer une pseudo-propriétédernier de l'objeto qui va retourner la dernière entrée du tableauo.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éthodeObject.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 à utiliserdes 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 :

Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveauxthreads, il utilise des fichiers distants, etc.).
Si la valeur est utilisée plus tard ou, dans certains cas, n'est pas utilisée du tout.
Si elle est utilisée plusieurs fois, il n'est pas nécessaire de la recalculer car sa valeur ne changera pas.

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

`get` ou`defineProperty` ?

Bien que le mot-cléget et la méthodeObject.defineProperty() aient des résultats similaires, il subsiste une différence lorsqu'on utiliseles classes.

Lorsqu'on utiliseget, la propriété sera définie sur le prototype de l'objet. AvecObject.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"));// undefinedconsole.log(  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), "coucou"),);// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }