Klasy w JavaScript są “syntactic sugar” nad istniejącym prototypowym dziedziczeniem. Wprowadzone w ECMAScript 2015 (ES6), klasy pozwalają na bardziej przejrzystą i łatwiejszą w zarządzaniu strukturę kodu, szczególnie przy budowaniu skomplikowanych aplikacji. Klasy umożliwiają tworzenie hierarchii obiektów, zapewniając mechanizmy takie jak konstruktor, dziedziczenie, metody instancji oraz metody statyczne.
W tej lekcji przedstawimy różne przypadki użycia klas w JavaScript, ilustrując je przykładami kodu.
Przykład użycia: Podstawowa klasa
Pierwszy przykład demonstruje stworzenie prostej klasy Car
, która opisuje samochód.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Klasy w JavaScript</title>
</head>
<body>
<h3>Przykład 1: Podstawowa klasa</h3>
<script>
// Definicja klasy Car
class Car {
constructor(brand, model, year) {
this.brand = brand;
this.model = model;
this.year = year;
}
// Metoda wyświetlająca informacje o samochodzie
displayInfo() {
console.log(`Marka: ${this.brand}, Model: ${this.model}, Rok: ${this.year}`);
}
}
// Utworzenie instancji klasy Car
const myCar = new Car("Ford", "Mustang", 1969);
myCar.displayInfo(); // Wyświetla: Marka: Ford, Model: Mustang, Rok: 1969
</script>
</body>
</html>
W powyższym kodzie, constructor
jest specjalną metodą służącą do tworzenia i inicjalizowania obiektów stworzonych za pomocą klasy. Metoda displayInfo
jest przykładem metody instancji, która może być wywoływana na obiekcie utworzonym z klasy Car
.
Przykład użycia: Dziedziczenie
Klasy w JavaScript mogą dziedziczyć właściwości i metody od innych klas. Poniższy przykład demonstruje stworzenie klasy ElectricCar
, która dziedziczy z klasy Car
.
<script>
// Rozszerzenie klasy Car przez ElectricCar
class ElectricCar extends Car {
constructor(brand, model, year, batteryRange) {
super(brand, model, year); // Wywołanie konstruktora klasy bazowej
this.batteryRange = batteryRange;
}
// Nadpisanie metody displayInfo
displayInfo() {
super.displayInfo(); // Wywołanie metody z klasy bazowej
console.log(`Zasięg na baterii: ${this.batteryRange} km`);
}
}
// Utworzenie instancji klasy ElectricCar
const myElectricCar = new ElectricCar("Tesla", "Model S", 2020, 600);
myElectricCar.displayInfo(); // Wyświetla dodatkowo informacje o zasięgu
</script>
W powyższym przykładzie, extends
jest użyte do zadeklarowania klasy ElectricCar
jako klasy pochodnej klasy Car
. Słowo kluczowe super
jest używane do wywołania konstruktora klasy bazowej oraz do dostępu do jej metod.
Podsumowanie
Klasy w JavaScript umożliwiają strukturyzację kodu w bardziej zrozumiały i łatwy do zarządzania sposób, szczególnie w przypadku złożonych projektów. Dzięki klasom, programiści mogą korzystać z dziedziczenia, enkapsulacji i polimorfizmu, co znacznie ułatwia tworzenie modularnego i ponownie wykorzystywalnego kodu.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.