Get

Sur cette page

La syntaxe get lie une propriété d'objet à une fonction qui sera appelée lors de la recherche de cette propriété. Il peut également être utilisé en classe.

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]() { /* … */ } }

Il existe quelques restrictions de syntaxe supplémentaires :

Un getter doit avoir exactement zéro paramètre.

Paramètres

prop
Le nom de la propriété à lier à la fonction donnée. De la même manière que les autres propriétés des initialiseurs d'objets, il peut s'agir d'une chaîne littérale, d'un nombre littéral ou d'un identifiant.

expression
Vous pouvez également utiliser des expressions pour qu'un nom de propriété calculé se lie à la fonction donnée.

Description

Parfois, il est souhaitable d'autoriser l'accès à une propriété qui renvoie une valeur calculée dynamiquement, ou vous souhaiterez peut-être refléter l'état d'une variable interne sans nécessiter l'utilisation d'appels de méthode explicites. En JavaScript, cela peut être accompli à l'aide d'un getter.

n'est pas possible d'avoir simultanément un getter lié à une propriété et que cette propriété contienne réellement une valeur, bien qu'il soit possible d'utiliser un getter et un setter conjointement pour créer un type de pseudo-propriété.

Exemples

Définir un getter sur les nouveaux objets dans les initialiseurs d'objets

Cela créera une pseudo-propriété Latest pour l'objet obj, qui renverra le dernier élément du tableau dans le journal.


const obj = {
  log: ["example", "test"],
  get latest() {
    if (this.log.length === 0) return undefined;
    return this.log[this.log.length - 1];
  },
};
console.log(obj.latest); // "test"

Notez que tenter d'attribuer une valeur à Latest ne la modifiera pas.

Utiliser des getters dans les classes Vous pouvez utiliser exactement la même syntaxe pour définir les getters d'instance publique disponibles sur les instances de classe. Dans les classes, vous n'avez pas besoin du séparateur virgule entre les méthodes.


class ClassWithGetSet {
  #msg = "hello world";
  get msg() {
    return this.#msg;
  }
  set msg(x) {
    this.#msg = `hello ${x}`;
  }
}

const instance = new ClassWithGetSet();
console.log(instance.msg); // "hello world"

instance.msg = "cake";
console.log(instance.msg); // "hello cake"

Les propriétés Getter sont définies sur la propriété prototype de la classe et sont donc partagées par toutes les instances de la classe. Contrairement aux propriétés getter dans les littéraux d'objet, les propriétés getter dans les classes ne sont pas énumérables.

Les getters statiques et privés utilisent des syntaxes similaires, qui sont décrites dans les pages de fonctionnalités des classes statiques et privées.

Suppression d'un getter à l'aide de l'opérateur delete

Si vous souhaitez supprimer le getter, vous pouvez simplement le supprimer :


delete obj.latest;

Définir un getter sur des objets existants à l'aide de DefineProperty

Pour ajouter un getter à un objet existant ultérieurement à tout moment, utilisez Object.defineProperty().


const o = { a: 0 };

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

console.log(o.b); // Runs the getter, which yields a + 1 (which is 1)

Utiliser un nom de propriété calculé


const expr = "foo";

const obj = {
  get [expr]() {
    return "bar";
  },
};

console.log(obj.foo); // "bar"

Définir des getters statiques


class MyConstants {
  static get foo() {
    return "foo";
  }
}

console.log(MyConstants.foo); // 'foo'
MyConstants.foo = "bar";
console.log(MyConstants.foo); // 'foo', a static getter's value cannot be changed

Getters intelligents / auto-écrasants / paresseux

Les getters vous permettent de définir une propriété d'un objet, mais ils ne calculent pas la valeur de la propriété tant qu'on n'y accède pas. Un getter reporte le coût de calcul de la valeur jusqu'à ce que la valeur soit nécessaire. Si vous n'en avez jamais besoin, vous n'en payez jamais le prix.

Une technique d'optimisation supplémentaire pour lazifier ou retarder le calcul d'une valeur de propriété et la mettre en cache pour un accès ultérieur sont les getters intelligents (ou mémorisés). La valeur est calculée la première fois que le getter est appelé, puis est mise en cache afin que les accès ultérieurs renvoient la valeur mise en cache sans la recalculer. Ceci est utile dans les situations suivantes :

Si le calcul de la valeur d'une propriété est coûteux (prend beaucoup de RAM ou de temps CPU, génère des threads de travail, récupère un fichier distant, etc.).
Si la valeur n'est pas nécessaire pour le moment. Il sera utilisé plus tard, ou dans certains cas, il n'est pas utilisé du tout.
S'il est utilisé, il sera consulté plusieurs fois et il n'est pas nécessaire de recalculer, cette valeur ne sera jamais modifiée ou ne devrait pas être recalculée.

Note :
Cela signifie que vous ne devez pas écrire un getter paresseux pour une propriété dont vous prévoyez de modifier la valeur, car si le getter est paresseux, il ne recalculera pas la valeur.

Note :
Les getters ne sont pas « paresseux » ou « mémorisés » par nature ; vous devez mettre en œuvre cette technique si vous désirez ce comportement.

Dans l'exemple suivant, l'objet possède un getter comme propre propriété. Lors de l'obtention de la propriété, la propriété est supprimée de l'objet et rajoutée, mais implicitement en tant que propriété de données cette fois. Enfin, la valeur est renvoyée.


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

obtenir vs définirProperty

Bien que l'utilisation du mot-clé get et de Object.defineProperty() donne des résultats similaires, il existe une différence subtile entre les deux lorsqu'ils sont utilisés sur des classes.

Lors de l'utilisation de get, la propriété sera définie sur le prototype de l'instance, tandis que lors de l'utilisation de Object.defineProperty(), la propriété sera définie sur l'instance à laquelle elle est appliquée.


class Example {
  get hello() {
    return "world";
  }
}

const obj = new Example();
console.log(obj.hello);
// "world"

console.log(Object.getOwnPropertyDescriptor(obj, "hello"));
// undefined

console.log(
  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), "hello"),
);
// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }

QZY.codes by quazerty

Get