L'oprateur get

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]() { ... } }

Paramtres

prop

Le nom de la proprit lier la fonction.

expression

Avec ECMAScript 2015, il est galement possible d'utiliser des expressions renvoyant un nom de proprit calcul pour le lier une fonction.

Description

Il est parfois utile de crer une proprit qui renvoie une valeur dynamique calcule, ou de ne pas avoir recours l'appel explicite d'une mthode 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 simultanment un accesseur assimil une proprit et d'avoir cette proprit initialise une valeur, mais il est possible d'utiliser un accesseur et un mutateur pour crer une sorte de pseudo-proprit.

On notera que l'oprateur get :

• peut tre identifi par un nombre ou une chane de caractres
• ne doit pas possder de paramtre (lire la page Changement ES5 : les fonctions d'accession et de mutation littrales doivent avoir maintenant zro ou un paramtre. (en anglais) pour plus d'informations)
• ne doit pas apparatre dans un littral objet avec un autre get ou une autre proprit avec le mme identifiant (les codes suivants : { get x() { }, get x() { } } et { x: ..., get x() { } } sont interdits).

Un accesseur peut tre supprim grce l'oprateur delete.

Exemples

Dfinir un accesseur avec l'oprateur get

Ce code va crer une pseudo-proprit dernier de l'objet o qui va retourner la dernire entre 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'oprateur delete

delete o.dernier;

Dfinir un accesseur sur des objets existants grce defineProperty

Afin d'ajouter un accesseur un objet qui existe dj, on peut utiliser la mthode Object.defineProperty().

var o = { a: 0 };

Object.defineProperty(o, "b", {
  get: function () {
    return this.a + 1;
  },
});

console.log(o.b); // Utilise l'accesseur qui gnre a + 1 (qui correspond  1)

Utiliser un nom de proprit calcul

var expr = "toto";

var obj = {
  get [expr]() {
    return "truc";
  },
};

console.log(obj.toto); // "truc"

Accesseurs mmoss

Les accesseurs permettent de dfinir des proprits sur un objet mais ils ne calculent pas la valeur de la proprit tant qu'il n'y a pas d'accs envers celle-ci. Un accesseur dlgue le cot de calcul jusqu'au moment o la valeur est vraiment ncessaire (si cette dernire n'est jamais utilise, cela ne cote alors rien).

Une technique supplmentaire pour optimiser ou retarder le calcul d'une valeur d'une proprit et de la mettre en cache pour les accs ultrieurs consiste utiliser des accesseurs intelligents mmoss . La valeur est calcule lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultrieurs renvoient la valeur en cache sans la recalculer. Cette mthode peut s'avrer utile dans plusieurs situations :

• Si le calcul de la valeur est coteux (il consomme beaucoup de RAM ou de temps CPU, il cre de nouveaux threads, il utilise des fichiers distants, etc.).
• Si la valeur est utilise plus tard ou, dans certains cas, n'est pas utilise du tout.
• Si elle est utilise plusieurs fois, il n'est pas ncessaire 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 modifie au cours du temps. En effet, avec la dfinition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.

Dans l'exemple suivant, l'objet possde un accesseur en proprit propre. Lors de l'accs la proprit, la proprit est retire de l'objet puis rajoute mais sous forme d'une proprit de donne (et non d'un accesseur). Enfin, la valeur est renvoye :

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 dfinit la fonction defineLazyGetter().

get ou defineProperty ?

Bien que le mot-cl get et la mthode Object.defineProperty() aient des rsultats similaires, il subsiste une diffrence lorsqu'on utilise les classes.

Lorsqu'on utilise get, la proprit sera dfinie sur le prototype de l'objet. Avec Object.defineProperty(), la proprit sera dfinie sur l'instance laquelle la mthode 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 }

Spcifications

Compatibilit des navigateurs

Voir aussi

• set
• delete
• Object.defineProperty()
• Object.prototype.__defineGetter__()
• Object.prototype.__defineSetter__()
• Dfinir des accesseurs et mutateurs, un chapitre du Guide JavaScript