Quel est le mot-clé «get» avant une fonction dans une classe?

106

Que getsignifie cette classe ES6? Comment référencer cette fonction? Comment dois-je l'utiliser?

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}
javascript methods getter Matthew Harwood
la source
5
C'est très probablement juste un getter mais à l'intérieur d'une classe au lieu d'un objet. Ce n'est pas vraiment spécifique à ES6.
user4642212
@Xufox comment voulez-vous dire que ce n'est pas spécifique à ES6?
Keith Nicholas
1
@KeithNicholas: Cela a fonctionné de la même manière dans ES5.
Bergi
@KeithNicholas Getters existe depuis ES5, je pense. La seule chose qui est ES6 ici est la classsyntaxe, mais les getters ne sont pas nouveaux.
user4642212

Réponses:

109

Cela signifie que la fonction est un getter pour une propriété.

Pour l'utiliser, utilisez simplement son nom comme vous le feriez pour toute autre propriété:

'use strict'
class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}

var p = new Polygon(10, 20);

alert(p.area);
Développer l'extrait

Amit
la source
2
Les classes sont implicitement en mode strict btw. ecma-international.org/ecma-262/6.0/#sec-strict-mode-code
Kit Sunde
1
@KitSunde - au moins sur mon navigateur (Chrome, Win7), sans cette déclaration, j'obtiens des erreurs de console au lieu d'un exemple de travail. Et cela ne fait pas partie de "La réponse", tout comme le bouton "Exécuter l'extrait de code" ne le fait pas.
Amit
4
Pouvez-vous pas simplement appeler p. calcArea? sinon, pourquoi pas?
ksav
9
Les mots-clés get / set ne sont-ils que du sucre syntaxique - puisqu'un appel à Polygon.calcArea () agira également comme un getter?
Craig O. Curtis
donc la fonction get getkeyword ne peut pas avoir de paramètre?
jay1234
47

Résumé:

Le getmot clé liera une propriété d'objet à une fonction. Lorsque cette propriété est recherchée, la fonction getter est appelée. La valeur de retour de la fonction getter détermine ensuite la propriété renvoyée.

Exemple:

const person = {
    firstName: 'Willem',
    lastName: 'Veen',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

}

console.log(person.fullName);
// When the fullname property gets looked up
// the getter function gets executed and its
// returned value will be the value of fullname
Développer l'extrait

Willem van der Veen
la source
2
Bravo pour l'exemple pratique!
Niket Pathak
8
Je pense que je peux le simplifier encore plus. Le 'get' vous permet de traiter une méthode de classe, comme s'il s'agissait d'une simple propriété dans un objet. Si vous laissez le 'get' désactivé, vous pouvez toujours accéder à la valeur en appelant .area () au lieu de simplement .area
dwilbank
21

C'est getter, comme les objets et les classes dans OO JavaScript. À partir des documents MDN pour get:

La getsyntaxe lie une propriété d'objet à une fonction qui sera appelée lorsque cette propriété est recherchée.

Praveen Kumar Purushothaman
la source
0

ou d'une manière plus simple, il suffit d'appeler la fonction sans avoir besoin de l'utilisateur "()" en tapant simplement le nom de la fonction

les deux fonctions ci-dessus accordent une attention égale à person.fullName () et person.fullName

const person = {
    firstName: 'Willem',
    lastName: 'Veen',
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

}

console.log(person.fullName());
Développer l'extrait

const person = {
    firstName: 'Willem',
    lastName: 'Veen',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

}

console.log(person.fullName);
Développer l'extrait

nima sarayan
la source