Hej

W końcu. Klasy w JavaScript. Nie żeby ich nie było czy coś. Ale teraz są w normalniej i czytelnej formie. Nie ma już bólu, że jest to okropne. Jak dla mnie jedna z najlepszych rzeczy. Koniec z jednoplikowymi programami. Koniec z zabawą jak to połączyć. Razem z modułami klasy tworzą świetną całość, na którą bardzo długo czekałem.

Klasa

No to zaczynamy. Zróbmy na początek klasę Rectangle. Jak widzimy posiada ona konstruktor. Bierze on dwa argumenty: height i width. Są przypisywane one jako pola klasy o tych samych nazwach.

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

Tylko teraz tworząc obiekt musimy pamiętać o kolejności. To już nie te czasy kiedy można było wpisywać funkcje gdzie się chciało i działały one wyżej. Dla klas musi być zachowana kolejność, czyli taki kod zwróci nam błąd:

var p = new Rectangle(); // ReferenceError

class Rectangle {}

Nie można już deklarować zmiennej zanim nie określimy klasy.

Get i Set

Klasy wprowadzają nam również gettery i settery. Pozwalają one nam wybierać i ustawiać odpowiednio pola w klasie.

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

  get area() {
    return this.width * this.height;
  }
  
  set area(value) {
    this.height = value / 2;
    this.width = value / 2;
  }

}

No i teraz pozostało zrozumieć jak te get i set działa.
Kiedyś pisaliśmy metody typu getHeight, getWidth i tak dalej. Teraz użycie słów kluczowych get i set tworzy nam tak jakby pole.
Pokażę to może na przykładzie:

const rect = new Rectangle(10, 10);

console.log(rect.area) // 100
rect.area = 50 // ustawia width i height po 25

Tak jak widzicie nie musimy wywoływać funkcji. Po prostu mamy dostęp jak do zwykłych pól i możemy nimi zarządzać w ten sam sposób. Jest to genialne rozwiązanie, gdyż pozwala nam wykorzystać pewne sztuczki i ułatwić nam pracę. Również mamy skrócony i bardziej intuicyjny zapis.

Dziedziczenie

W końcu przyszło i się zadomowiło. Jak się używa np React to słówko extends ciągle nam towarzyszy. Przyjrzyjmy się temu z bliska:

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' hałasuje.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' szczeka.');
  }
}

var d = new Dog('Reksio');
d.speak(); // Reksio szczeka.

No i nasz piesek szczeka. Wprowadzono proste dziedziczenie. Metody są nadpisywane przez klasę 'wyżej'. Dodatkowo jest kopiowana funkcjonalność z klasy, którą rozszerzamy. Tutaj jest to widoczne przy konstruktorze. Zostaje skopiowany konstruktor z polem name. Nie musimy już go definiować Dog.

Jeśli chcielibyśmy stworzyć konstruktor w klasie Dog to potrzebujemy wywołać super();. Wykona nam to kod konstruktora klasy, którą rozszerzamy. Warto o tym pamiętać.

Zapraszam też do zapoznania się z dokumentacją mozilli na temat klas: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes