Dziedziczenie jest centralnym pojęciem w programowaniu obiektowym, które umożliwia ci rozszerzanie istniejących klas oraz korzystanie z ich właściwości i metod. JavaScript wprowadził wraz z ES6 nowszą i bardziej robustną składnię dziedziczenia, która jest znacznie łatwiejsza do obsługi niż pierwotne metody prototypowe. W tym przewodniku pokażę ci, jak zastosować dziedziczenie w JavaScript za pomocą słowa kluczowego extends oraz krok po kroku wyjaśnię, jak poprawnie wywołać konstruktor klasy bazowej za pomocą super.
Najważniejsze wnioski
- Dziedziczenie w JavaScript odbywa się za pomocą słowa kluczowego extends.
- Konstruktor klasy bazowej musi zostać wywołany za pomocą super.
- Zmienne instancyjne mogą być odwoływane przez słowo kluczowe this w klasie pochodnej.
Przewodnik krok po kroku
Tworzenie klasy bazowej
Aby rozpocząć dziedziczenie, najpierw tworzymy klasę bazową o nazwie Shape. W tej klasie definiujemy konstruktor oraz kilka metod.
Tutaj definiujesz klasę Shape, która ma konstruktor. Możesz w tym konstruktorze definiować zmienne i funkcje, do których mogą mieć dostęp inne klasy.
Badanie podklasy
Po utworzeniu klasy bazowej możesz teraz stworzyć podklasę, która dziedziczy po Shape. W tym przykładzie nazwamy nową klasę ConcreteShape.
W tej podklasie używamy słowa kluczowego extends, aby wskazać, że ConcreteShape dziedziczy po Shape. Konstruktor podklasy wywołuje konstruktor klasy bazowej Shape za pomocą super(), co jest konieczne do poprawnej implementacji dziedziczenia.
Instancjonowanie podklasy
Teraz, gdy stworzyliśmy podklasę, nadszedł czas, aby utworzyć instancję tej klasy.
Tutaj tworzysz nowy obiekt myShape klasy ConcreteShape i przekazujesz opis do konstruktora. Następnie wywołujesz metodę print, która wypisuje opis.
Dodawanie dodatkowych właściwości
Możesz dodać do swojej podklasy dodatkowe właściwości lub nawet metody, które są specyficzne dla tej podklasy.
Tutaj rozszerzyłeś klasę ConcreteShape, dodając dodatkowe parametry do konstruktora.
Wykorzystanie dziedziczenia
Za pomocą słowa kluczowego super możesz wywołać metodę describe klasy bazowej, aby połączyć właściwości klasy bazowej i podklasy.
Podsumowanie – Dziedziczenie w JavaScript: Od ES6 do ES13
W tym samouczku nauczyłeś się, jak działa dziedziczenie w JavaScript, szczególnie z nową składnią class. Zobaczyłeś, jak definiować klasy, jak dziedziczyć z klasy bazowej oraz jak poprawnie wywoływać konstruktor. Te mechanizmy ułatwiają ci utrzymanie czystości i możliwości konserwacji twojego kodu, efektywnie wykorzystując ponownie funkcje.
Najczęściej zadawane pytania
Jaka jest różnica między super() a this?super() jest używane do wywołania konstruktora klasy bazowej, podczas gdy this odnosi się do instancji aktualnej klasy.
Dlaczego korzystanie z klas ES6 jest lepsze niż z prototypów?Klasy ES6 oferują jaśniejszą i bardziej intuicyjną składnię, co ułatwia czytanie i rozumienie kodu.
Czy mogę mieć wiele klas bazowych?Nie, JavaScript nie wspiera dziedziczenia wielokrotnego. Klasa może dziedziczyć tylko z jednej innej klasy.
Co się stanie, jeśli nie wywołam super()?Jeśli nie wywołasz super(), otrzymasz błąd, ponieważ konstruktor klasy bazowej, który inicjalizuje to, co jest potrzebne dla klasy, nie zostanie wykonany.
