Klasy

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.

Poprzedni
Następny
Scroll to Top