JavaScript Razredi (ang. Classes)

Razredi so predloge za ustvarjanje objektov. Podatke združijo s kodo, ki na teh podatkih deluje. Razredi v JavaScriptu temeljijo na prototipih, vendar uvajajo lastno sintakso in semantiko. Tako kot funkcije lahko razrede definiramo na dva načina: z izrazom razreda ali z deklaracijo razreda. Izrazi razreda so lahko anonimni ali poimenovani (drugače kot spremenljivka, ki jim je dodeljena). Za razliko od deklaracij funkcij imajo deklaracije razredov enake omejitve “mrtve cone” kot spremenljivke, deklarirane z let ali const, zato se ne “dvignejo”.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>JavaScript razredi – primer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        body { 
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
            padding: 10px; 
        }
        code { 
            padding: 2px 4px;
        }
        .out { 
            padding: 8px; 
            border: 1px solid #ddd;
            border-radius: 6px;
        }
    </style>
</head>
<body>
<h1>Primer: class, dedovanje (extends/super) in static</h1>
    
<pre>
class Oseba {
    constructor(ime, priimek) {
        this.ime = ime;
        this.priimek = priimek;
    }
    polnoIme() { return `${this.ime} ${this.priimek}`; }
}
    
class Uporabnik extends Oseba {
    constructor(ime, priimek, vloga = "gost") {
        super(ime, priimek); // klic konstruktorja nad-razreda
        this.vloga = vloga;
    }
    opis() { return `${this.polnoIme()} (${this.vloga})`; }
    static izEmaila(email) { // statična metoda – klic: Uporabnik.izEmaila(...)
        const [user] = email.split("@");
        const [ime, priimek = ""] = user.split(".");
        return new Uporabnik(ime ?? "Neznano", priimek ?? "Neznano", "uporabnik");
    }
}

const a = new Oseba("Ana", "Kranjc");
const b = new Uporabnik("Borut", "Bukovnik", "admin");
const c = Uporabnik.izEmaila("john.doe@example.com");

document.getElementById("out").innerText = a.polnoIme() + "\n" + b.opis() + "\n" + c.opis();
</pre>
    
<div id="out" class="out"></div>

<script>
class Oseba {
    constructor(ime, priimek) {
        this.ime = ime;
        this.priimek = priimek;
    }
    polnoIme() { return `${this.ime} ${this.priimek}`; }
}

class Uporabnik extends Oseba {
    constructor(ime, priimek, vloga = "gost") {
        super(ime, priimek);
        this.vloga = vloga;
    }

    opis() { return `${this.polnoIme()} ( ${this.vloga})`; }
    static izEmaila(email) {
        const [user] = email.split("@");
        const [ime, priimek = ""] = (user || "").split(".");
        return new Uporabnik(ime || "Neznano", priimek || "Neznano", "uporabnik");
    }
}

const a = new Oseba("Ana", "Kranjc");
const b = new Uporabnik("Borut", "Bukovnik", "admin");
const c = Uporabnik.izEmaila("john.doe@example.com");
document.getElementById("out").innerText = a.polnoIme() + "\n" + b.opis() + "\n" + c.opis();
</script>
</body>
</html>

REZULTAT

Razred je posebna vrsta funkcije, a namesto ključne besede function uporabimo ključno besedo class. Lastnosti običajno inicializiramo znotraj metode constructor().


class ImeRazreda {
    constructor() { /* ... */ }
}


class Oseba {
    constructor(ime, priimek) {
        this.ime = ime;
        this.priimek = priimek;
    }
}

Zgornji primer ustvari razred z imenom ImeRazreda/Oseba, ki ima začetne lastnosti ime in priimek. Razred (ang. Class) ni objekt — je predloga za JavaScript objekte. Ključne točke: razred definiraš s class, začetno stanje v constructor(), dedovanje z extends in klic nad-razreda s super(). Statične metode (static) kličeš na razredu, ne na instanci.

Interaktivni primer

Interaktivni primer prikazuje: (1) ustvarjanje instance razreda Oseba, (2) podrazred Uporabnik, ki deduje iz Oseba in kliče super(), (3) klic dedovanih metod, npr. polnoIme(), ter (4) statično metodo izEmaila(), ki iz e‑poštnega naslova ustvari uporabnika. Z gumbi lahko: ustvariš instanco, pokličeš metode, pregledaš JSON stanja in po nastaviš primer. Namen vaje je jasno ločiti lastnosti instance, metode razreda in statične metode.

Interaktivno: Razredi – Oseba in Uporabnik

Ustvari instanco

Ime

Priimek

Vloga (za podrazred)

E‑pošta (za static izEmaila)

Klic metod

Izhod:

Trenutna instanca (JSON):

Koncepti razredov

Razred	Razredi so predloge za ustvarjanje objektov.	Glej primer
Uporaba razreda	Ko imamo razred, ga uporabimo za ustvarjanje instanc (objektov) z new.	Glej primer
constructor	Inicializira začetno stanje/lastnosti nove instance.	Glej primer
extends	Ustvari podrazred, ki deduje lastnosti in metode nad-razreda.	Glej primer
static	Definira metode na razredu (klic: ImeRazreda.metoda()), ne na instanci.	Glej primer
super()	Kliče konstruktor ali metode nad-razreda znotraj podrazreda.	Glej primer