Jak możemy korzystać z klas w ES6?

By /

JavaScript

Wprowadzenie ES6 (ECMAScript 2015) do języka JavaScript przyniosło wiele usprawnień, w tym lepsze wsparcie dla programowania obiektowego za pomocą klas. Klasy w ES6 pozwalają na bardziej zorganizowane i czytelne tworzenie obiektów i zarządzanie dziedziczeniem. Słowa kluczowe extends i super umożliwiają łatwe rozszerzanie klas i odwoływanie się do funkcjonalności klasy bazowej. W tej lekcji zobaczymy, jak można używać tych mechanizmów na przykładzie modelowania obiektów reprezentujących różne rodzaje budynków.

Przykład kodu: Budynki i dziedziczenie

Zacznijmy od stworzenia podstawowej klasy Building, która będzie bazą dla innych typów budynków. Następnie utworzymy klasy rozszerzające Building, takie jak House i Office, wykorzystując extends do dziedziczenia i super do wywołania konstruktora klasy bazowej.

// Klasa bazowa dla wszystkich budynków
class Building {
    constructor(name, floors) {
        this.name = name;
        this.floors = floors;
    }

    displayInfo() {
        console.log(`${this.name} ma ${this.floors} piętra.`);
    }
}

// Klasa House dziedzicząca z Building
class House extends Building {
    constructor(name, floors, residents) {
        // Wywołanie konstruktora klasy bazowej
        super(name, floors); 
        this.residents = residents;
    }

    displayInfo() {
        super.displayInfo(); // Wywołanie metody klasy bazowej
        console.log(`I mieszka w niej ${this.residents} osób.`);
    }
}

// Klasa Office dziedzicząca z Building
class Office extends Building {
    constructor(name, floors, companies) {
        super(name, floors); // Wywołanie konstruktora klasy bazowej
        this.companies = companies;
    }

    displayInfo() {
        super.displayInfo(); // Wywołanie metody klasy bazowej
        console.log(`I znajduje się w nim ${this.companies} firm.`);
    }
}

 HTML

Aby zilustrować wykorzystanie naszych klas w praktyce, utworzymy prosty interfejs użytkownika za pomocą HTML, który pozwoli na tworzenie i wyświetlanie informacji o różnych budynkach.

<!DOCTYPE html>
<html>
<head>
    <title>Budynki w JavaScript</title>
</head>
<body>
    <script src="buildings.js"></script>
    <script>
        // Tworzenie instancji klas
        const myHouse = new House("Dom Rodzinny", 2, 4);
        const myOffice = new Office("Biuro Centrum", 10, 5);

        // Wyświetlanie informacji o budynkach
        myHouse.displayInfo();
        myOffice.displayInfo();
    </script>
</body>
</html>

W powyższym kodzie HTML dołączamy nasz skrypt JavaScript (buildings.js), a następnie tworzymy obiekty House i Office oraz wywołujemy ich metody displayInfo, aby wyświetlić informacje o tych budynkach.

Podsumowanie

Klasy w ES6 znacząco ułatwiają tworzenie zorganizowanego i modularnego kodu w JavaScript. Dzięki słowom kluczowym extends i super, możemy łatwo implementować dziedziczenie, co pozwala na budowanie złożonych hierarchii obiektów z mniejszym wysiłkiem. Wykorzystanie klas do modelowania obiektów, takich jak budynki w naszym przykładzie, pokazuje, jak można efektywnie zarządzać i rozszerzać funkcjonalności obiekt

Powiązane artykuły

Scroll to Top