Javascript – konstruktor

article-thumbnail

We wcześniejszym wpisie omówiliśmy już wprowadzenie do programowania obiektowego. Jednak były to dopiero początki naszej przygody z OOP. Dzisiaj chciałem poruszyć temat konstruktorów czyli funkcji budujących nasz obiekt. Następnie na ich podstawie chciałem wyjaśnić czym jest przeciążanie i jak można je wykorzystać.

Konstruktor

Konstruktorem nazywamy funkcję, która wykonuje się podczas tworzenia obiektu. Jej zadaniem jest ustawienie wartości cech (zmiennych wewnątrz obiektu). Dzięki takiemu podejściu możemy zabezpieczyć funkcję przed błędnym ustawianiem wartości. Jednak na razie wróćmy do konstruktora. Deklarujemy go za pomocą słowa kluczowego constructor(), oczywiście umieszczonego wewnątrz klasy. Następnie podajemy nawiasy klamrowe (tzw. wąsy) i w nich umieszczamy kod który się wykona. Podczas ustawiania zmiennych w konstruktorze, poprzedzamy je słowem kluczowym this. Opowiem o nim w innym wpisie, gdyż jest on jednym z trudniejszych tematów w JS’ie. Oto przykładowa implementacja konstruktora.

<script>
class Czlowiek
  {
    constructor(imie, nazwisko,wiek)
    {
      this.imie = imie;
      this.nazwisko = nazwisko;
      this.wiek = wiek;
    }
  }
  const adam = new Czlowiek("Adam", "Kowalski", 35);
  alert(JSON.stringify(adam));
</script>

Użyta tutaj metoda JSON.stringify() służy do przekształcania obiektu na tekst. Jak widać udało nam się utworzyć obiekt z konstruktorem. Jednak do czego nam to potrzebne? Dzięki użyciu konstruktora możemy sprawdzać poprawność wprowadzonych danych. Imię chociażby musi być tekstem a wiek musi być liczbą nie mniejszą od zera. Przeróbmy więc nasz konstruktor tak, aby realizował te założenia. Oto moja przykładowa implementacja:

<script>
  class Czlowiek
  {
    constructor(imie, nazwisko,wiek)
    {
      if(typeof imie === 'string')
        this.imie = imie;
      else
        this.imie = null;
      if(typeof nazwisko === 'string')
        this.nazwisko =nazwisko;
      else
        this.nazwisko = null;
      if(wiek>=0)
      this.wiek = wiek;
      else this.wiek = null;
    }
  }
  const adam = new Czlowiek(0, "Kowalski", -35);
  alert(JSON.stringify(adam));
</script>

Użyte w kodzie słowo null oznacza zmienną pustą, nieposiadającą wartości. Pozwoli to w logice strony łatwiej obejść brak wymaganej zmiennej. Alternatywnie można po prostu zdefiniować wartość domyślną zmiennej.

Ustalanie wartości domyślnej

Aby ustawić wartość domyślną możemy użyć zapis wykorzystującego spójnik lub. Zapisujemy wówczas instrukcję przypisania wartości zmiennej, następnie wartość oraz dodajemy symbol || po którym umieszczamy wartość domyślną. Zapis będzie wyglądał tak:

<script>
  class Czlowiek
  {
    constructor(imie, nazwisko,wiek)
    {
      this.imie = imie || "No-Name";
      this.nazwisko = nazwisko || "No-Surname";
      this.wiek = wiek || 0;
    }
  }
  const adam = new Czlowiek("adam");
  alert(JSON.stringify(adam));
</script>

Uzyskaliśmy spodziewane rezultaty. Oczywiście zachęcam do poszerzania wiedzy z użyciem dokumentacji czy chociażby mdn.