Pierwsza Klasa Javascript ES6

Jak wspominałem w jednym z poprzednich wpisów – obecnie częściej pracuję z Javascriptem niż z Javą i czuję się w niej już na tyle pewnie, że postanowiłem nieco wiedzą się podzielić i zrobić to z perspektywy „backendowca”. Tak, więc przed Tobą pierwsza klasa Javascript ES6.

Po staremu…

Utwórzmy pusty katalog i zaimportujmy go do najpopularniejszego obecnie IDE używanego do projektów front-endowych – Visual Studio Code.

Utwórzmy w tym katalogu stary i lubiany index.html

<html>
    <head></head>
    <body>
        Hello JavaScript World
    </body>
</html>

Możemy ten plik zapisać i otworzyć w preferowanej przeglądarce.

Naszym celem będzie wyświetlenie tego samego tekstu za pomocą JavaScriptowych klas 🙂

Klasa Javascript ES6

Zacznijmy więc od utworzenia klasy Greeter z polem text i ustawieniu go podczas konstrukcji obiektu.

class Greeter {

    constructor(text) {
        this.text = "Hello JavaScript ES6 World";
    }

    greet() {
        return this.text;
    }

}

Wygląda całkiem znajomo? Jeśli programujesz w Javie/C# to powinno 🙂

class Hero definiuję nową klasę o nazwie Hero,  osobą pracującym z z np. Javą zabraknie następnie definicji pól i ich typów… no właśnie – w JS nie mamy typów, więc po co same nazwy?

Następnie konstruktor, tu jest znacząca różnica – zamiast nazwy klasy używamy funkcji constructor wraz z listą parametrów (gdzie ponownie backendowcy przez pewien czas odczuwają tik nerwowy, bo brakuję tam typów). Samo ciało konstruktora pokrywa się 1 do 1 z tym, co widzimy w innych językach – do pola text tego obiektu przypisz daną wartość tekstową.

Pochód zamyka metoda greet() zwracająca pole text obiektu.

Użycie klasy w kodzie HTML

<html>
    <head>
        <scripttype="text/javascript"src="./Greeter.js"></script>
    </head>
    <body>
        <script>
            let greeter = new Greeter();
            console.log(greeter.greet());
        </script>
        Hello JavaScript World
    </body>
</html>

<html>
    <head>
        <script type="text/javascript" src="./Greeter.js"></script>
    </head>
    <body>
        <h2 id="greet">
        <script>
            let greeter = new Greeter();
            document.getElementById("greet").innerHTML = greeter.greet();
        </script>
        </h2>
    </body>
</html>