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

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 mutateur 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 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 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 :

  • Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveaux threads, 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 code, 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 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 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 État Commentaires
ECMAScript 5.1 (ECMA-262)
La définition de 'Object Initializer' dans cette spécification.
Standard Définition initiale
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Method definitions' dans cette spécification.
Standard Ajout des noms de propriétés calculés.
ECMAScript Latest Draft (ECMA-262)
La définition de 'Method definitions' dans cette spécification.
Projet  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung InternetNode.js
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 2IE Support complet 9Opera Support complet 9.5Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Ouinodejs Support complet Oui
Computed property namesChrome Support complet 46Edge Support complet OuiFirefox Support complet 34IE Aucun support NonOpera Support complet 47Safari Aucun support NonWebView Android Support complet 46Chrome Android Support complet 46Edge Mobile Support complet OuiFirefox Android Support complet 34Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Support complet 5.0nodejs Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, cavalor, BenoitL, titouandk, fscholz, teoli, Jeremie, matteodelabre
Dernière mise à jour par : SphinxKnight,