JavaScript Constructor (Konstruktor)

Metoda konstruktorja je posebna metoda, ki mora imeti točno ime constructor() in se izvaja samodejno, ko je nov objekt ustvarjen. Uporablja se za inicializacijo lastnosti objekta. Če ne definiramo metode konstruktorja, bo JavaScript dodal prazno metodo konstruktorja. Razred ne more imeti več kot ene metode constructor(), ker bo povzročilo SyntaxError. Če želimo ustvariti dedovanje razreda, moramo uporabiti ključno besedo extends. Metoda super() se nanaša na nadrejeni razred. S klicem metode super() v metodi konstruktorja pokličemo nadrejeno metodo konstruktorja in pridobimo dostop do nadrejenih lastnosti in metod. Lastnost konstruktorja vrne funkcijo, ki ustvari prototip. Za JavaScript polja lastnost vrne kot function Objekt() { [native code] }.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Constructor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .primer-container {
            max-width: 100%;
            margin: 20px auto;
        }
        
        .primer-section {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .primer-section h3 {
            color: blue;
            margin-bottom: 15px;
            font-size: 1.2em;
        }
        
        .primer-section p {
            color: black;
            margin: 10px 0;
            line-height: 1.5;
        }
    </style>
</head>
<body>
<div class="primer-container">
    <!-- 1. OSNOVNI PODATKOVNI TIPI -->
    <div class="primer-section">
        <h3>1. Vgrajeni konstruktorji za osnovne podatkovne tipe</h3>
        <p id="osnovniTipi"></p>
        <p id="steviloRezultat"></p>
        <p id="nizRezultat"></p>
        <p id="logicnaRezultat"></p>
    </div>

    <!-- 2. OBJEKTI IN TABELE -->
    <div class="primer-section">
        <h3>2. Konstruktorji za kompleksne podatkovne tipe</h3>
        <p id="tabelaRezultat"></p>
        <p id="objektRezultat"></p>
        <p id="datumRezultat"></p>
    </div>

    <!-- 3. LASTNI KONSTRUKTOR -->
    <div class="primer-section">
        <h3>3. Uporaba lastnega konstruktorja</h3>
        <p id="avtomobilInfo"></p>
        <p id="avtomobilKonstruktor"></p>
    </div>
</div>

<script>
    // 1. OSNOVNI PODATKOVNI TIPI
    // Vsak osnovni tip ima svoj konstruktor
    let stevilo = 42;
    let niz = "JavaScript";
    let logicna = true;

    document.getElementById("osnovniTipi").innerHTML = 
        "Vsak podatkovni tip ima svoj konstruktor, ki ga lahko preverimo:";
    document.getElementById("steviloRezultat").innerHTML = 
        "Število (42) → konstruktor: " + stevilo.constructor;
    document.getElementById("nizRezultat").innerHTML = 
        "Niz ('JavaScript') → konstruktor: " + niz.constructor;
    document.getElementById("logicnaRezultat").innerHTML = 
        "Logična vrednost (true) → konstruktor: " + logicna.constructor;

    // 2. KOMPLEKSNI PODATKOVNI TIPI
    // Ti tipi so bolj kompleksni in vedno uporabljajo konstruktor
    const tabela = ["Jabolko", "Hruška", "Pomaranča"];
    const objekt = { ime: "Test", vrednost: 123 };
    const datum = new Date();

    document.getElementById("tabelaRezultat").innerHTML = 
        "Tabela → konstruktor: " + tabela.constructor + "<br>Vsebina: " + tabela.join(", ");
    document.getElementById("objektRezultat").innerHTML = 
        "Objekt → konstruktor: " + objekt.constructor;
    document.getElementById("datumRezultat").innerHTML = 
        "Datum → konstruktor: " + datum.constructor + "<br>Vrednost: " + datum.toLocaleString();

    // 3. LASTNI KONSTRUKTOR
    // Ustvarimo svoj konstruktor za delo z objekti
    class Avtomobil {
        constructor(znamka, model, letnik) {
            this.znamka = znamka;
            this.model = model;
            this.letnik = letnik;
        }

        informacije() {
            return `${this.znamka} ${this.model} (${this.letnik})`;
        }
    }

    // Uporabimo naš konstruktor
    const mojAvto = new Avtomobil("Fiat", "Punto", 2020);

    document.getElementById("avtomobilInfo").innerHTML = 
        "Ustvarili smo nov avtomobil: " + mojAvto.informacije();
    document.getElementById("avtomobilKonstruktor").innerHTML = 
        "Konstruktor našega avtomobila: " + mojAvto.constructor;
</script>
</body>
</html>

REZULTAT