Klasy i obiekty w JavaScripcie ES6: wprowadzenie i dziedziczenie

W poprzednim rozdziale zajmowaliśmy się zdarzeniami w JavaScripcie. W tym rozdziale przyjrzymy się klasom i obiektom.

Warto rozumieć klasy i obiekty w JavaScripcie, bo pozwalają budować bardziej złożone struktury danych i lepiej porządkować kod. Zanim się w nie zagłębisz, przyda ci się znajomość podstaw programowania obiektowego.

Czym jest klasa w JavaScripcie?

Klasa to wzorzec, na podstawie którego tworzy się obiekty. Definiuje właściwości i metody, jakie te obiekty będą miały. Dzięki klasom utworzysz wiele obiektów dzielących te same właściwości i metody, co w wielu sytuacjach potrafi bardzo ułatwić życie.

Deklaracja klasy

Klasę w JavaScripcie zadeklarujesz taką składnią:

class MaClasse {
  // Konstruktor klasy
  constructor() {
    // Inicjalizacja właściwości i metod klasy
  }

// Metody klasy
  maMethode() {
    // Kod metody
  }
}

Konstruktor i metody klasy

Definicja klasy w JavaScripcie zawiera konstruktor, czyli specjalną metodę służącą do utworzenia i zainicjowania obiektu na podstawie tej klasy.

Konstruktor deklaruje się słowem kluczowym „ constructor ”. Na przykład:

// Konstruktor klasy
constructor() {
// Inicjalizacja właściwości i metod klasy
}

Metody klasy definiuje się tak samo jak funkcje, z tą różnicą, że nie używa się słowa kluczowego „ function ”.

// Metody klasy
maMethode() {
 // Kod metody
}

Po metody obiektu sięgasz tak samo jak po jego właściwości, taką składnią: monObjet.maMethode();

const monObjet = new MaClasse();
monObjet.maMethode();

Dziedziczenie w klasach

Dziedziczenie to jedno z kluczowych pojęć programowania obiektowego. Polega na utworzeniu nowej klasy na bazie istniejącej, z przejęciem jej właściwości i metod. Dzięki temu kod da się wykorzystać ponownie, a aplikację łatwiej uporządkować.

W JavaScripcie dziedziczenie w klasach realizuje składnia „ extends ”. Oto przykład klasy „ Enfant ”, która dziedziczy po klasie „ Parent ”:

class Parent {
  constructor(nom) {
    this.nom = nom;
  }

saluer() {
    console.log(Bonjour, je suis ${this.nom});
  }
}

class Enfant extends Parent {
  constructor(nom, age) {
    super(nom);
    this.age = age;
  }
}

const enfant1 = new Enfant('Marie', 7);
enfant1.saluer(); // Bonjour, je suis Marie

Wywołanie metody super

Metoda super służy do wywołania metody klasy nadrzędnej z poziomu klasy potomnej. Załóżmy, że masz klasę Animal z metodą „ move() ” opisującą, jak zwierzęta się poruszają, oraz klasę Chat, która dziedziczy po klasie Animal. Metodą super wywołasz wtedy metodę „ move() ” klasy Animal z poziomu klasy Chat. Oto przykładowy kod:

class Animal {
  move() {
    console.log('Je me déplace');
  }
}

class Chat extends Animal {
  move() {
    console.log('Je me déplace en sautant');
    super.move();
  }
}

const monChat = new Chat();
monChat.move();
// wyświetla "Je me déplace en sautant", a potem "Je me déplace"

Metody statyczne

Metody statyczne należą do samej klasy, a nie do jej instancji. Można je wywołać bez tworzenia instancji klasy. Możesz na przykład zdefiniować w klasie Animal metodę statyczną „ getAnimalType() ”, która zwraca typ zwierzęcia. Oto przykładowy kod:

class Animal {
  static getAnimalType() {
    return 'Animal';
  }
}

console.log(Animal.getAnimalType()); // wyświetla "Animal"

Metod statycznych nie da się wywołać na instancjach klasy. Jeśli spróbujesz wywołać metodę „ getAnimalType() ” na instancji klasy Animal, dostaniesz błąd.

Jak operować właściwościami obiektu?

Konstruktorowi klasy możesz też przekazać parametry, żeby zainicjować właściwości obiektu:

class MaClasse {
  constructor(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }
}
const monObjet = new MaClasse("Valeur de param1", "Valeur de param2");

Po właściwość obiektu sięgniesz taką składnią:

monObjet.maPropriete;

Właściwość obiektu zmienisz taką składnią:

monObjet.maPropriete = "Nouvelle valeur";

Żeby usunąć właściwość obiektu, użyj operatora „ delete ”:

delete monObjet.maPropriete;

Nie usuniesz właściwości obiektu, jeśli została zdefiniowana na jego prototypie. Jak radzić sobie z właściwościami odziedziczonymi, opisuje kolejna sekcja o dziedziczeniu w obiektach.

Gettery i settery w klasie

Gettery i settery to metody, które pozwalają odczytywać i zmieniać właściwości obiektu w kontrolowany sposób. Sięga się po nie zwykle wtedy, gdy przy odczycie lub zapisie właściwości ma zadziałać dodatkowa logika.

Oto przykład użycia getterów i setterów w klasie:

class MonObjet {
  constructor(propriete) {
    this._propriete = propriete;
  }

// Getter
  get propriete() {
    return this._propriete;
  }

// Setter
  set propriete(value) {
    this._propriete = value;
  }
}

const objet = new MonObjet('valeur initiale');
console.log(objet.propriete); // wyświetla 'valeur initiale'

objet.propriete = 'nouvelle valeur';
console.log(objet.propriete); // wyświetla 'nouvelle valeur'

Gettery i settery są metodami, a nie właściwościami. Po ich wartość sięgasz więc składnią objet.propriete(), a nie objet.propriete (bez nawiasów).

W powyższym przykładzie getter odczytuje wartość właściwości _propriete, a setter ją zmienia. Samą właściwość _propriete zadeklarowaliśmy w konstruktorze klasy słowem kluczowym this. Jest prywatna i zmienisz ją wyłącznie przez getter i setter.

class MonObjet {
  constructor(valeur) {
    this._maPropriete = valeur;
  }

get maPropriete() {
    return this._maPropriete;
  }

set maPropriete(valeur) {
    if (typeof valeur === 'string') {
      this._maPropriete = valeur;
    } else {
      console.log('La valeur doit être une chaîne de caractères');
    }
  }
}

const monObj = new MonObjet('ma valeur');
console.log(monObj.maPropriete); // Wyświetla 'ma valeur'
monObj.maPropriete = 42; // Wyświetla 'La valeur

Podsumowanie

Zobaczyliśmy, jak używać klas i obiektów w JavaScripcie, żeby skuteczniej strukturyzować i porządkować kod, a potem jak tworzyć obiekty na bazie klas i nimi operować za pomocą konstruktora i metod. Omówiliśmy też dziedziczenie w klasach z metodą super oraz metody statyczne. Na koniec wspomnieliśmy o getterach i setterach, które kontrolują dostęp do właściwości obiektu i ich modyfikację.

W następnym rozdziale zobaczymy, jak obsługiwać błędy i debugować kod przy użyciu try-catch oraz narzędzi deweloperskich przeglądarki. Dzięki temu lepiej zrozumiesz, co dzieje się w twoim kodzie, i w razie potrzeby go poprawisz.