JavaScript — Introduktion genom exempel

11.1 Prototype och metoder

I kapitel 8 gick vi igenom hur objekt kunde användas för att strukturera data. Objekten innehöll då endast egenskaper, där olika värden sparades. Nu ska vi gå vidare med att se på hur vi kan lägga till metoder i objekten.

Den första metoden vi har är konstruktorfunktionen (constructor). Genom den har vi en början på en objektklass, som är en definition av objektet och en "mall" som används, då vi skapar instanser. Vi ska nu också skapa en definition av objektklassen, där både egenskaper och alla metoder som hör till objektet ska ingå.

Sammanfattning

Varje instans av ett objekt innehåller en uppsättning av egenskaperna, så att olika värden kan sparas i dem i olika instanser av objektet.

Metoderna är dock inte olika för olika instanser, utan de ser likadana ut för alla instanser. Metoderna sparas därför inte i instanserna, utan de ligger i en s.k. prototyp för objektet. Därmed finns det endast en uppsättning av metodernas kod, oavsett hur många instanser det finns.

Det går lägga till metoder till ett objekt, genom att referera till objektets namn och prototype, t.ex.
MyObject.prototype.myMethod = function () { ... }

Detta kan vara användbart, om man vill lägga till egna metoder till ett redan existerande objekt, t.ex. till Array. Förr användes detta även då man skapade egna objekt, men numera bör man istället använda nyckelordet class.

class

Skapar man helt egna objekt, grupperar man hela definitionen av objektet i en class-deklaration, t.ex.

class MyObject {
    constructor() {
        this.property = ...
        ...
    }
    myMethod() {
        ...
    }
    ...
}

Konstruktorfunktionen måste heta constructor, men övriga metoder namnger man till vad man själv vill. En vanlig konvention är att inleda namnet på hela klassen med en versal, medan namnen på egenskaperna och metoderna inleds med gemener.

Egna övningar

Använd filerna test.html, test.css och test.js.

Skriv om programmet med konstruktorfunktionen som du skapade i övningen i ex 8-5 på följande sätt:

• Skapa en class för objektet Forecast, som ska innehålla data och metoder för en väderprognos för en dag. Den konstruktorfunktion som du tidigare hade ska alltså nu bli funktionen constructor i denna class.
• Om du inte redan har det, lägger du till en egenskap för en bild. Det finns ett antal bilder i mappen img/weather, som du sedan kan använda, så i egenskapen sparar du filnamnet, t.ex. "sun", "cloud", etc. Detta får du då också lägga till, då du i init-funktionen skapar instanserna av Forecast.
• I "classen" ska det också finnas en funktion kallad getShortForecast. Denna funktion ska skapa ett div-element för objektets prognos och returnera det. Funktionen används sedan i funktionen showWeather, då väderprognosen skrivs ut.
  • Det div-element som skapas ska innehålla ett antal p-element och ett img-element med data från objektets egenskaper.
  • Skapa elementen med createElement, så som det visades i exemplen i kapitel 10, fast du behöver inte skapa textnoder. Istället kan du lägga in innehållet i elementen med .innerText eller .innerHTML, så blir det lite mindre kod i funktionen.
  • Du väljer själv vad som ska visas i prognosen, fast bilden ska vara med och det är endast den högsta temperaturen som ska vara med. Temperaturen ska dessutom visas i det andra p-elementet, för att det dels ska funka med CSS-koden och dels stämma med det tillägg som sedan ska göras i övningen i nästa exempel.

Vid utskrift kan det t.ex. se ut på följande sätt, med den CSS-kod som redan finns i CSS-filen.