Modest Programmer logo
20 września 2018
Tagi: JavaScript
Kolejny dzień - kolejny temat dotyczący podstaw programowania w języku JavaScript. W tym artykule postaram Ci się przedstawić kolejne bardzo specyficzne metody, które mogą występować w obiektach, będą to gettery i settery.

Tak jak zawsze, rozpocznijmy od przykładu:
let course = {
    name: 'Podstawy JavaScript',
    price: 50,
    currency: 'PLN'  
};
Jeżeli chciałbyś wyświetlić informacje o cenie dla tego kursu wraz z jego walutą, musiałbyś użyć mniej więcej takiej składni:
console.log(`Cena: ${course.price} ${course.currency}`); //Cena: 50 PLN
Przyznasz, że nie jest to zbyt wygodne i pewnie wolałbyś, aby jakaś metoda w klasie zwracała takie informacje.
let course = {
    name: 'Podstawy JavaScript',
    price: 50,
    currency: 'PLN', 
    priceInfo() {
        return `Cena: ${course.price} ${course.currency}`;
    }
};

console.log(course.priceInfo()); //Cena: 50 PLN
Niby wszystko ok, ale taki zapis ma kilka wad. Po pierwsze musisz się odwoływać do priceInfo() tak jak do metody, czyli dodając nawiasy po nazwie. Poza tym jest ona tylko do odczytu, to znaczy nie można przypisać z zewnątrz wartości do priceInfo().

Aby uniknąć tych wad, możesz użyć właśnie gettera i settera. Get, używasz do pobierania wartości, a set do przypisania wartości. Przerobienie obecnej metody na get i set jest bardzo proste. Zobacz:
let course = {
    name: 'Podstawy JavaScript',
    price: 50,
    currency: 'PLN', 
    get priceInfo() {
        return `Cena: ${course.price} ${course.currency}`;
    },
    set priceInfo(value) {
        let values = value.split(' ');
        this.price = values[0];
        this.currency = values[1];
    }
};

console.log(course.priceInfo); //Cena: 50 PLN
course.priceInfo = '20 USD';
console.log(course.priceInfo); //Cena: 20 USD
Jak widzisz chcąc zmienić metodę na get, wystarczy dopisać przed nazwą słowo get, dzięki takiemu zapisowi możesz pobierać wartość z metody, odwołując się tak jak do zwykłych zmiennych, to znaczy bez podawania nawiasów po nazwie.
console.log(course.priceInfo); // Cena: 50 PLN
Aby móc przypisywać wartości, musisz dodać kolejną metodę, poprzedzając ją słowem set oraz w nawiasie przyjmować wartość.
set priceInfo(value) {
    //...
}
course.priceInfo = '20 USD';
Jak widzisz, dzięki takiemu zapisowi możesz przypisać wartość setterowi. W powyższym przypadku argumentem czyli value jest wartość "20 USD".

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Parametry domyślne w JavaScript.
Następny artykuł - Algorytm FizzBuzz w JavaScript.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista. Specjalizuje się w C#, głównie WPF, Windows Forms oraz ASP.NET MVC.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2018 modestprogrammer.pl. Wszelkie prawa zastrzeżone Design by Kazimierz Szpin