JavaScript Razredi: Razred

Razred (class) je predloga za ustvarjanje objektov. V konstruktorju nastavimo začetno stanje, v razredu pa definiramo metode. Instance ustvarimo z new. S pomočjo instanceof lahko preverimo, ali objekt pripada določenemu razredu.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Razred (class) – osnovni primeri</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        body {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            padding: 20px;
            line-height: 1.45;
        }
        .primer {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
        }
        .primer h2 { 
            margin-top: 0; 
        }
        .izpis {
            margin-top: 10px;
            white-space: pre-wrap;
            line-height: 1.5;
        }
        code {
            padding: 1px 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="primer" id="primer1">
        <h2>Primer 1 – definicija razreda in constructor</h2>
        <p>Koda: <code>class Oseba { constructor(ime, priimek) { ... } }</code></p>
        <div class="izpis" id="izpis1"></div>
    </div>
    
    <div class="primer" id="primer2">
        <h2>Primer 2 – ustvarjanje instanc z <code>new</code></h2>
        <p>Koda: <code>const a = new Oseba("Ana", "Kranjc")</code></p>
        <div class="izpis" id="izpis2"></div>
    </div>
    
    <div class="primer" id="primer3">
        <h2>Primer 3 – metoda razreda</h2>
        <p>Koda: <code>polnoIme() { return this.ime + " " + this.priimek; }</code></p>
        <div class="izpis" id="izpis3"></div>
    </div>
    
    <div class="primer" id="primer4">
        <h2>Primer 4 – preverjanje z <code>instanceof</code></h2>
        <p>Koda: <code>a instanceof Oseba</code></p>
        <div class="izpis" id="izpis4"></div>
    </div>
    
    <script>
        // Primer 1
        {
            class Oseba {
                constructor(ime, priimek) {
                    this.ime = ime ?? "";
                    this.priimek = priimek ?? "";
                }
        }
        
            const opis = "Razred Oseba ima constructor(ime, priimek), ki nastavi začetne lastnosti.";
            document.getElementById("izpis1").textContent = opis;
        }
        
        // Primer 2
        {
            class Oseba {
                constructor(ime, priimek) {
                    this.ime = ime ?? "";
                    this.priimek = priimek ?? "";
                }
            }
            
            const a = new Oseba("Ana", "Kranjc");
            const b = new Oseba("Borut", "Bukovnik");
            document.getElementById("izpis2").textContent = 
                "a: " + JSON.stringify(a) + "\n" + "b: " + JSON.stringify(b);
        }
        
        // Primer 3
        {
            class Oseba {
                constructor(ime, priimek) {
                    this.ime = ime ?? "";
                    this.priimek = priimek ?? "";
                }
                
                polnoIme() {
                    return (this.ime + " " + this.priimek).trim();
                }
            }
            
            const c = new Oseba("Maja", "Novak");
            document.getElementById("izpis3").textContent = "c.polnoIme(): " + c.polnoIme();
        }
        
        // Primer 4
        {
            class Oseba {
                constructor(ime, priimek) {
                    this.ime = ime ?? "";
                    this.priimek = priimek ?? "";
                }
            }
            
            const d = new Oseba("John", "Doe");
            const jeOseba = d instanceof Oseba;
            const jeNiz = d instanceof String;
            
            document.getElementById("izpis4").textContent = 
                "d instanceof Oseba: " + jeOseba + "\n" + "d instanceof String: " + jeNiz;
        }
    </script>
</body>
</html>

REZULTAT