Co to jest słowo kluczowe „get” przed funkcją w klasie?

106

Co getoznacza w tej klasie ES6? Jak mam odwołać się do tej funkcji? Jak mam tego używać?

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
źródło
5
Najprawdopodobniej jest to po prostu getter, ale wewnątrz klasy zamiast obiektu. To nie jest specyficzne dla ES6.
user4642212
@Xufox, co masz na myśli, że to nie jest specyficzne dla ES6?
Keith Nicholas
1
@KeithNicholas: To działało tak samo w ES5.
Bergi
Myślę, że @KeithNicholas Getters istnieje od ES5. Jedyną rzeczą, która jest tutaj ES6, jest classskładnia, ale metody pobierające nie są niczym nowym.
user4642212

Odpowiedzi:

109

Oznacza to, że funkcja pobiera właściwość.

Aby z niej skorzystać, po prostu użyj jej nazwy, tak jak każdej innej właściwości:

'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);
Rozwiń fragment

Amit
źródło
2
Klasy są niejawnie w trybie ścisłym btw. ecma-international.org/ecma-262/6.0/#sec-strict-mode-code
Kit Sunde
1
@KitSunde - przynajmniej w mojej przeglądarce (Chrome, Win7), bez tego oświadczenia otrzymuję błędy konsoli zamiast działającej próbki. I to nie jest część „Odpowiedzi”, podobnie jak przycisk „Uruchom fragment kodu”.
Amit
4
Nie możesz po prostu zadzwonić p. calcArea? jeśli nie, dlaczego nie?
ksav
9
Czy słowa kluczowe get / set to tylko cukier składniowy - skoro wywołanie Polygon.calcArea () będzie również działać jako getter?
Craig O. Curtis
więc funkcja get getsłowo kluczowe nie może mieć parametru?
jay1234
47

Podsumowanie:

Słowo getkluczowe będzie wiązać właściwość obiektu z funkcją. Kiedy ta właściwość jest teraz sprawdzana, wywoływana jest funkcja pobierająca. Zwracana wartość funkcji pobierającej określa następnie, która właściwość jest zwracana.

Przykład:

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
Rozwiń fragment

Willem van der Veen
źródło
2
Kciuki za praktyczny przykład!
Niket Pathak
8
Myślę, że mogę to jeszcze bardziej uprościć. Polecenie „get” pozwala traktować metodę klasową tak, jakby była prostą właściwością obiektu. Jeśli zostawisz off „get”, nadal można uzyskać dostęp do wartości poprzez wywołanie .area () zamiast tylko .area
dwilbank
21

Jest pobierany, tak samo jak obiekty i klasy w OO JavaScript. Z Dokumentów MDN dla get:

getSkładnia wiąże właściwość obiektu do funkcji, która zostanie wywołana gdy ta właściwość jest wzrok.

Praveen Kumar Purushothaman
źródło
0

lub w prostszy sposób, po prostu wywołuje funkcję bez konieczności używania "()" przez wpisanie nazwy funkcji

dwie powyższe funkcje są jednakowe dla person.fullName () i person.fullName

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

}

console.log(person.fullName());
Rozwiń fragment

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

}

console.log(person.fullName);
Rozwiń fragment

nima sarayan
źródło