Klasy w JavaScript

Kolejną nowością, która została wprowadzona w ES6 są klasy. Dzisiaj postaram Ci się trochę przybliżyć ten temat, chociaż będzie on dla Ciebie bardziej zrozumiały gdy przejdziemy do prototypów i ogólnie całego OOP, ale o tym jeszcze nie dzisiaj. Na początek chcę tylko zwrócić uwagę, że klasy w JavaScript są czymś innym niż klasy w językach obiektowych takich jak C# czy Java. Nie opisywałem tego sposobu przy okazji artykułu, w którym przedstawiałem Ci jak można tworzyć obiekty, ale dzięki klasom również możemy tworzyć obiekty i głównie o tym będę pisał w tym artykule.

Może na początek przypomnijmy sobie w jaki sposób tworzyliśmy obiekty z użyciem funkcji konstruujących.

function Car(name, price, isDiesel) {
    this.name = name;
    this.price = price;
    this.isDiesel = isDiesel;
    this.turnOn = function () {
       return 'Silnik włączony';
    }
}

let car = new Car('Audi', 35000, true);
console.log(car.name); //Audi
console.log(car.turnOn()); //Silnik włączony

Nic skomplikowanego, na pewno doskonale to pamiętasz :) Zatem spróbujmy stworzyć taki sam obiekt za pomocą klasy.

class Car {
    constructor(name, price, isDiesel) {
        this.name = name;
        this.price = price;
        this.isDiesel = isDiesel;        
    }

    turnOn() {
        return 'Silnik włączony';
     }
}

let car = new Car('Audi', 35000, true);
console.log(car.name); //Audi
console.log(car.turnOn()); //Silnik włączony

Chociaż klasy w JavaScript nie są tym samym co klasy w językach obiektowych takich jak C# czy Java, to i tak dla programistów tych języków takie podejście jest najbardziej intuicyjne. Constructor w każdej klasie odpalany jest jako pierwszy i to właśnie constructor zawiera kod inicjalizujący obiekt. Metody w takim zapisie lądują w prototypie, ale o tym będziemy rozmawiać w kolejnych artykułach. Jeżeli nie chcesz, aby metoda była w prototypie to możesz użyć takiej składki:

class Car {
    constructor(name, price, isDiesel) {
        this.name = name;
        this.price = price;
        this.isDiesel = isDiesel;
        this.turnOn = function () {
            return 'Silnik włączony';
         }
    }
}

let car = new Car('Audi', 35000, true);
console.log(car.name); //Audi
console.log(car.turnOn()); //Silnik włączony

Co prawda powyższa deklaracja klasy działa tak samo, ale jednak nie do końca, ponieważ tutaj metody nie są w prototypie. Pamiętaj zawsze o słowie kluczowym new w deklaracji obiektu, ponieważ otrzymasz wtedy bład:

let car = Car('Audi', 35000, true); //TypeError: class constructor must be invoked with |new|

Na koniec sprawdźmy sobie jakiego typu jest obiekt Car.

console.log(typeof Car); //function

Obiekty stworzone za pomocą klas są funkcjami.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Symbole w JavaScript.
Następny artykuł - Const a obiekty w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły