Was ist das Schlüsselwort "get" vor einer Funktion in einer Klasse?

105

Was getbedeutet in dieser ES6-Klasse? Wie verweise ich auf diese Funktion? Wie soll ich es benutzen?

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
quelle

Es ist höchstwahrscheinlich nur ein Getter, aber innerhalb einer Klasse anstelle eines Objekts. Es ist nicht wirklich ES6-spezifisch.

— user4642212

@Xufox wie meinst du es ist nicht ES6 spezifisch?

— Keith Nicholas

@KeithNicholas: Dass es in ES5 genauso funktioniert hat.

— Bergi

@ KeithNicholas Getters gibt es seit ES5, denke ich. Das einzige, was hier ES6 ist, ist die classSyntax, aber Getter sind nichts Neues.

— user4642212

Antworten:

108

Dies bedeutet, dass die Funktion ein Getter für eine Eigenschaft ist.

Um es zu verwenden, verwenden Sie einfach seinen Namen wie jede andere Eigenschaft:

'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);

Erweitern Sie das Snippet

— Amit
quelle

Klassen befinden sich übrigens implizit im strengen Modus. ecma-international.org/ecma-262/6.0/#sec-strict-mode-code

— Kit Sunde

@KitSunde - zumindest in meinem Browser (Chrome, Win7), ohne diese Anweisung erhalte ich Konsolenfehler anstelle eines funktionierenden Beispiels. Und dies ist nicht Teil von "The Answer", ähnlich wie die Schaltfläche "Code-Snippet ausführen" nicht.

— Amit

Kannst du nicht einfach anrufen p. calcArea? wenn nicht, warum nicht?

— ksav

Sind die Schlüsselwörter get / set nur syntaktischer Zucker - da ein Aufruf von Polygon.calcArea () auch als Getter fungiert?

— Craig O. Curtis

getAlso kann die Funktion get keyword keinen Parameter haben?

— jay1234

Zusammenfassung:

Das getSchlüsselwort bindet eine Objekteigenschaft an eine Funktion. Wenn diese Eigenschaft jetzt nachgeschlagen wird, wird die Getter-Funktion aufgerufen. Der Rückgabewert der Getter-Funktion bestimmt dann, welche Eigenschaft zurückgegeben wird.

Beispiel:

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

Erweitern Sie das Snippet

— Willem van der Veen
quelle

Daumen hoch für das praktische Beispiel!

— Niket Pathak

Ich denke, ich kann es noch weiter vereinfachen. Mit 'get' können Sie eine Klassenmethode so behandeln, als wäre sie eine einfache Eigenschaft in einem Objekt. Wenn Sie das 'get' weglassen, können Sie weiterhin auf den Wert zugreifen, indem Sie .area () anstelle von .area

— dwilbank

Es ist genau wie Objekte und Klassen in OO JavaScript. Aus den MDN-Dokumenten für get:

Die getSyntax bindet eine Objekteigenschaft an eine Funktion, die beim Nachschlagen dieser Eigenschaft aufgerufen wird.

— Praveen Kumar Purushothaman
quelle