JavaScript znacznie rozwinął się na przestrzeni lat. Szczególnie po wprowadzeniu ES6 programowanie za pomocą klas stało się znacznie łatwiejsze. Stara metoda tworzenia klas za pomocą prototypów i funkcji konstruktorskich była często niewygodna i podatna na błędy. W tym samouczku dowiesz się, jak skutecznie korzystać z nowej składni class oraz jakie są różnice między starą a nową formą zapisu. Ponadto nauczysz się, jak rozszerzyć swoją strukturę klas za pomocą dziedziczenia.
Najważniejsze wnioski
- Nowa składnia class umożliwia jaśniejszą i bardziej zwartą formę definicji.
- Użycie konstruktorów jest prostsze i nie wymaga oddzielnych prototypów.
- Funkcjonalność za nową składnią class pozostaje oparta na prototypach.
Instrukcja krok po kroku
1. Zrozumienie starej formy zapisu
Aby dostrzec zalety nowej składni klas, najpierw przyjrzymy się starej metodzie. Stworzona została funkcja konstruktora, a metody były dodawane przez prototyp.
Jeśli chcesz utworzyć nowy obiekt, robisz to za pomocą new Shape(1, 100, 200). Następnie obiekt shape może być wykorzystany do uzyskania właściwości.
2. Wyświetlanie wartości
Aby upewnić się, że nasza instancja obiektu działa poprawnie, wypisujemy właściwości x i y.
3. Wprowadzenie nowej składni class
Teraz przechodzimy do nowej składni class, dostępnej od ES6.
Zmiany są wyraźne: nie potrzebujesz już oddzielnego prototypu. Zamiast tego definiujesz wszystkie metody wewnątrz samej klasy.
4. Tworzenie obiektów za pomocą nowej klasy
Tworzenie obiektu za pomocą nowej składni odbywa się tak samo jak wcześniej. Używasz new, aby stworzyć instancję klasy Shape.
5. Użycie nowej klasy
Użycie nowo zdefiniowanej klasy jest identyczne jak w przypadku starej metody. Możesz użyć instancji shape1, aby uzyskać wartości i zastosować metodę move.
6. Dziedziczenie w klasach
Kolejną zaletą składni class jest możliwość dziedziczenia. Jeśli chcesz stworzyć nową klasę, która dziedziczy po istniejącej klasie, możesz użyć słowa kluczowego extends.
W tym przypadku konstruktor klasy podrzędnej super() wywołuje konstruktor klasy nadrzędnej. Dzięki temu możesz wykorzystać właściwości Shape i jednocześnie zdefiniować unikalne właściwości dla Rectangle.
7. Podsumowanie deklaracji class
Składnia class sprawia, że Twój kod staje się nie tylko bardziej przejrzysty, ale również pozwala na lepszą strukturę podczas pracy z koncepcjami obiektowo-orientowanymi. Możesz nie tylko tworzyć klasy, ale także budować złożone hierarchie dziedziczenia, co czyni Twój kod bardziej elastycznym i łatwiejszym w utrzymaniu.
Podsumowanie - Nowa składnia klas w JavaScript: ES6 do ES13
W tym samouczku nauczyłeś się, jak skutecznie stosować nową składnię class w JavaScript od ES6 do ES13. Stara metoda tworzenia klas była często uciążliwa i podatna na błędy, podczas gdy nowa składnia umożliwia jasną i prostą strukturę. Dodatkowo poznałeś podstawy dziedziczenia dzięki składni extends, aby jeszcze bardziej rozwijać swoje klasy.
Najczęściej zadawane pytania
Jaka jest różnica między starą a nową składnią klas?Stara metoda używa funkcji konstruktorskich i prototypów, podczas gdy nowa składnia upraszcza definicję i użycie klas.
Dlaczego powinienem używać nowej składni class?Oferuje ona jaśniejsze, bardziej zwarte i intuicyjne podejście do definiowania klas, co poprawia konserwację i czytelność kodu.
Jak działa dziedziczenie z użyciem składni class?Twoja klasa może przejąć funkcjonalności innej klasy za pomocą słowa kluczowego extends, wywołując konstruktor klasy nadrzędnej za pomocą super().
