JavaScript Razredi: extends

Z extends ustvarimo podrazred, ki deduje lastnosti in metode nad-razreda. V konstruktorju podrazreda pokličemo super(...), da inicializiramo nad-razred. Metode lahko prepišemo (override) in po potrebi pokličemo tudi super.metoda(). S pomočjo instanceof preverimo tip, polimorfizem pa omogoča enotno klicanje enako imenovanih metod na različnih tipih.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>extends – dedovanje, super in prepis metod</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 – extends in super v konstruktorju</h2>
        <p>Koda: <code>class Pes extends Zival { constructor(ime, pasma) 
        { super(ime); this.pasma = pasma; } }</code></p>
        <div class="izpis" id="izpis1"></div>
    </div>
    
    <div class="primer" id="primer2">
        <h2>Primer 2 – override in super.metoda()</h2>
        <p>Koda: <code>oglasiSe() { return super.oglasiSe() + " (LAJ!)"; }</code></p>
        <div class="izpis" id="izpis2"></div>
    </div>
    
    <div class="primer" id="primer3">
        <h2>Primer 3 – instanceof</h2>
        <p>Koda: <code>pes instanceof Zival // true</code></p>
        <div class="izpis" id="izpis3"></div>
    </div>
    
    <div class="primer" id="primer4">
        <h2>Primer 4 – statične metode</h2>
        <p>Koda: <code>static izObjekta(o) { return new Pes(o.ime, o.pasma); }</code></p>
        <div class="izpis" id="izpis4"></div>
    </div>
    
    <div class="primer" id="primer5">
        <h2>Primer 5 – polimorfizem</h2>
        <p>Koda: <code>seznam.map(x => x.oglasiSe())</code></p>
        <div class="izpis" id="izpis5"></div>
    </div>

    <script>
    // Primer 1
    {
        class Zival {
            constructor(ime) {
                this.ime = ime ?? "";
            }
            opis() {
                return `Žival: ${this.ime}`;
            }
            oglasiSe() {
                return "???";
            }
        }
        
        class Pes extends Zival {
            constructor(ime, pasma) {
                super(ime); // pokliče konstruktor nad-razreda
                this.pasma = pasma ?? "";
            }
        }
    
        const rex = new Pes("Rex", "Nemški ovčar");
        document.getElementById("izpis1").textContent = rex.opis() + " | pasma: " + rex.pasma;
    }
    
    // Primer 2
    {
        class Zival {
            oglasiSe() { return "???"; }
        }
        
        class Pes extends Zival {
            oglasiSe() {
                return super.oglasiSe() + " (LAJ!)"; // razširi vedenje nad-razreda
            }
        }
        
        class Macka extends Zival {
            oglasiSe() {
                return "Mijav!";
            }
        }
        
        const p = new Pes();
        const m = new Macka();
        document.getElementById("izpis2").textContent = 
            "Pes: " + p.oglasiSe() + "\n" + "Mačka: " + m.oglasiSe();
    }
    
    // Primer 3
    {
        class Zival {}
        class Pes extends Zival {}
        
        const pes = new Pes();
        const jePes = pes instanceof Pes;
        const jeZival = pes instanceof Zival;
        const jeNiz = pes instanceof String;
        
        document.getElementById("izpis3").textContent =
            "pes instanceof Pes: " + jePes + "\n" +
            "pes instanceof Zival: " + jeZival + "\n" +
            "pes instanceof String: " + jeNiz;
    }
    
    // Primer 4
    {
        class Zival {
            static jeZival(x) { return x instanceof Zival; }
        }
        class Pes extends Zival {
            constructor(ime, pasma) {
                super(ime);
                this.ime = ime ?? "";
                this.pasma = pasma ?? "";
            }
                static izObjekta(o) {
                return new Pes(o?.ime ?? "", o?.pasma ?? "");
            }
        }
        
        const p = Pes.izObjekta({ ime: "Bobi", pasma: "Mešanec" });
        const test = [
            "Zival.jeZival(p): " + Zival.jeZival(p),
            "Pes.jeZival(p): " + Pes.jeZival(p) // podrazred deduje statične metode
        ].join("\n");
        
        document.getElementById("izpis4").textContent = test + "\nUstvarjen: " + JSON.stringify(p);
    }
    
    // Primer 5
    {
        class Zival {
            oglasiSe() { return "???"; }
        }
        class Pes extends Zival {
            oglasiSe() { return "Laj!"; }
        }
        class Macka extends Zival {
            oglasiSe() { return "Mijav!"; }
        }
        
        const seznam = [new Zival(), new Pes(), new Macka()];
        const izhodi = seznam.map(x => x.oglasiSe());
        
        document.getElementById("izpis5").textContent = 
            "Klic iste metode na različnih tipih:\n" + izhodi.join("\n");
    }
    </script>
</body>
</html>

REZULTAT