JavaScript & ES6 - Klase


Šta su klase u ES6?

U ECMAScriptu 5 i starijim, klase nikada nisu postojale u JavaScript-u. Klase su uvedene u ES6 koji izgleda slično kao u drugim objektno orijentisanim jezicima, kao što su Java, PHP, itd., ali oni ne rade potpuno na isti način. Klase ES6 olakšavaju stvaranje objekata, implementaciju nasljeđivanja pomoću ključne riječi extends i ponovnu upotrebu koda. U ES6 možete deklarisati klasu pomoću nove ključne riječi class nakon koje slijedi ime klase. Prema dogovoru, nazivi klasa su napisani u TitleCase (tj. veliko početno slovo svake riječi).

class Rectangle {
    // Klasa konstruktora
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
    
    // Metoda klase
    getArea() {
        return this.length * this.width;
    }
}

// Klasa Square nasljeđuje se iz klase Rectangle
class Square extends Rectangle {
    // Konstruktor klase djeteta
    constructor(length) {
        // Pozovanje roditeljskog konstruktora
        super(length, length);
    }
    
    // Metoda klase djeteta
    getPerimeter() {
        return 2 * (this.length + this.width);
    }
}

let rectangle = new Rectangle(5, 10);
alert(rectangle.getArea()); // 50

let square = new Square(5);
alert(square.getArea()); // 25
alert(square.getPerimeter()); // 20

alert(square instanceof Square); // true
alert(square instanceof Rectangle); // true
alert(rectangle instanceof Square); // false
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 klase</title>
</head>
<body>
    <script>
    class Rectangle {
        // Klasa konstruktora
        constructor(length, width) {
            this.length = length;
            this.width = width;
        }
        
        // Metoda klase
        getArea() {
            return this.length * this.width;
        }
    }
    
    // Klasa Square nasljeđuje se iz klase Rectangle
    class Square extends Rectangle {
        // Konstruktor klase djeteta
        constructor(length) {
            // Pozovanje roditeljskog konstruktora
            super(length, length);
        }
        
        // Metoda klase djeteta
        getPerimeter() {
            return 2 * (this.length + this.width);
        }
    }
    
    let rectangle = new Rectangle(5, 10);
    document.write(rectangle.getArea()); // 50
    document.write("<br>");
    
    let square = new Square(5);
    document.write(square.getArea()); // 25
    document.write("<br>");
    document.write(square.getPerimeter()); // 20
    document.write("<br>");
    
    document.write(square instanceof Square); // true
    document.write("<br>");
    document.write(square instanceof Rectangle); // true
    document.write("<br>");
    document.write(rectangle instanceof Square); // false
    </script>
</body>
</html>

U gornjem primjeru klasa Square nasljeđuje Rectangle pomoću ključne riječi extends. Klase koje nasljeđuju iz drugih klasa nazivaju se izvedenim klasama ili dječjim klasama. Takođe, morate pozvati super() u konstruktoru podređene klase prije pristupanja kontekstu (this). Na primjer, ako izostavite super() i na kvadratnom objektu pozovete metodu getArea(), to će rezultovati greškom, jer metoda getArea() zahtijeva pristup ovoj ključnoj riječi.