8.5 Konstruktor-funktion
Ska man ha flera objekt som ska vara strukturerade på samma sätt, vill man ha en mall, där egenskaperna specificeras. En sådan "mall" kallas för klass eller objekttyp. För att skapa instanser av objektet, kan man skapa en "konstruktor-funktion".
15 min.
Sammanfattning
En konstruktor-funktion (constructor på engelska) används, då man ska skapa en ny instans utav ett objekt, t.ex. abc = new Course();
En konstruktor-funktion kan skapas på olika sätt, men i dessa exempel arbetar vi endast med egenskaper i objekten och då räcker det att skapa funktionen med nyckelordet function. För att skilja den från övriga funktioner, brukar man inleda namnet med en versal, medan variablerna där man sparar instanser inleds med gemener, t.ex. let myCourse = new Course("abc", 15); Konstruktor-funktionen definieras då som:
function Course(a, b) {
this.e1 = a;
this.e2 = b;
this.e3 = 10;
}I konstruktor-funktionen inför man egenskaperna och tilldelar dem ett initialt värde. Värdena kan antingen vara parametrar som skickas med i anropet med new eller värden som bestäms inuti funktionen. I referensen till egenskaperna inleder man med nyckelordet this, för att referera till den instans som skapas.
Egna övningar
Använd filerna test.html, test.css och test.js.
- Skriv en konstruktor-funktion, kallad
Forecast, som skapar en instans av ett objekt för en dag i en väderprognos. Förslagsvis använder du samma struktur och egenskaper (eller delar av dem) som du införde i din DTD- och XML-kod i övningen i ex8.2. Du behöver inte ha med några bilder, utan det räcker med textinnehåll. - Använd sedan funktionen för att i
init-funktionen skapa tre instanser och spara dem i den globala arrayenforecast. - Skriv också kod i funktionen
showWeatherför att skapa HTML-kod, för att skriva ut väderprognosen med de tre dagarna.
Du kan presentera väderprognosen hur du vill, men i CSS-filen finns stöd för antingen en ul-lista eller en tabell. Resultatet kan då bli på något av följande sätt:
Lista:
Tabell: