Du har laget et person-objekt med navn, alder og yrke. Nå trenger du ti slike objekter. Å kopiere og lime inn det samme objektet ti ganger, bare med ulike verdier, fungerer teknisk sett. Men det er tungvint, feilutsatt og vanskelig å vedlikeholde. En constructor i JavaScript gir deg en mal som lager nye objekter med samme struktur, på en kodelinje.
Problemet med manuelle objekter
Når du lager objekter manuelt, må du skrive hele strukturen hver gang. Har du et objekt med fem nøkler og tre metoder, betyr det åtte linjer kode per objekt. Med ti objekter er du oppe i 80 linjer som gjør nøyaktig det samme, bare med forskjellige verdier. Endrer du strukturen senere (for eksempel legger til en ny nøkkel), må du oppdatere hvert eneste objekt manuelt.
En constructor løser dette ved å samle strukturen på ett sted. Du definerer malen en gang, og bruker den til å lage så mange objekter du vil. Trenger du femti brukerobjekter eller hundre produktobjekter? Constructoren håndterer det uten at du gjentar en eneste linje med struktur.
Slik lager du en constructor i JavaScript
En constructor er en vanlig funksjon, men den brukes på en spesiell måte. Konvensjonen er å skrive funksjonsnavnet med stor forbokstav, slik at det er tydelig at den er ment som en constructor:
function Person() { this.navn = "Albert"; this.alder = 76; this.yrke = "fysiker"; }
Nøkkelordet this peker på det nye objektet som blir opprettet. Hver linje med this.nøkkel = verdi legger til en egenskap på det objektet. For å bruke constructoren og faktisk opprette et objekt, bruker du new:
let albert = new Person();
Nå er albert et fullverdig objekt med egenskapene navn, alder og yrke. Du kan bruke det akkurat som ethvert annet objekt: albert.navn gir deg "Albert", og albert.yrke gir deg "fysiker".
Gjør constructoren fleksibel med parametere
Eksempelet over lager objekter som alltid får de samme verdiene. Det er ikke spesielt nyttig. Styrken til en constructor kommer når du bruker funksjonsparametere til å sende inn ulike verdier:
function Person(navn, alder, yrke) { this.navn = navn; this.alder = alder; this.yrke = yrke; }
Nå kan du lage unike objekter med en enkelt linje per person:
- let albert = new Person("Albert", 76, "fysiker");
- let neil = new Person("Neil", 39, "astronaut");
- let freddy = new Person("Freddy", 45, "artist");
Hvert objekt har sin egen kopi av verdiene. Albert.alder er 76, neil.alder er 39, og freddy.alder er 45. Strukturen er identisk, men dataene er unike.
Metoder i en constructor
En constructor kan også inneholde metoder. Definer dem med this akkurat som egenskaper:
function Person(navn, alder, yrke) { this.navn = navn; this.alder = alder; this.yrke = yrke; this.hilsen = function() { return "Hei, jeg heter " + this.navn; }; }
Nå har hvert objekt en hilsen-metode. Kall albert.hilsen() og du får "Hei, jeg heter Albert". Kall freddy.hilsen() og du får "Hei, jeg heter Freddy". Metoden er den samme, men this peker på det objektet som kaller den, så resultatet varierer.
Dette mønsteret er kraftig fordi det lar deg samle logikk og data i samme enhet. Objektet vet ikke bare hva det inneholder, men kan også gjøre ting med dataene sine.
Vanlige feil med constructors
Den vanligste feilen er å glemme new foran constructor-kallet. Uten new blir this bundet til det globale objektet (window i nettleseren) i stedet for et nytt objekt. Resultatet er at du ikke får et objekt tilbake, og variabelen din ender opp som undefined. Skriv alltid stor forbokstav på constructor-navn, slik at det er lett å se at new hører med.
En annen feil er å bruke objektnavnet i stedet for this inne i constructoren. Skriver du albert.navn = navn inne i Person-funksjonen, vil bare det ene objektet fungere. Alle andre objekter laget med new Person() vil feile. Bruk alltid this.
Constructor i JavaScript sammenlignet med klasser
I nyere versjoner av JavaScript (ES6 og oppover) finnes det en alternativ syntaks kalt klasser. Under overflaten fungerer klasser på nøyaktig samme måte som constructor-funksjoner. De er syntaktisk sukker som gjør koden lettere å lese, men mekanismen er den samme.
Forstår du constructors, forstår du også grunnlaget for klasser. Constructor-funksjoner er den opprinnelige måten å lage gjenbrukbare objektmaler på i JavaScript, og du møter dem fortsatt i eldre kodebaser og tutorials. Å lære constructors først gir deg en solid forståelse av hva som skjer under panseret når du senere bruker klassesyntaksen.
Når bør du bruke en constructor?
Bruk en constructor når du trenger flere objekter med samme form. En handleliste-app kan ha en Vare-constructor med egenskapene navn, antall og kjøpt. Et spill kan ha en Fiende-constructor med egenskapene posisjon, helse og hastighet. Poenget er at constructoren sparer deg for gjentakelse og gjør koden enklere å endre senere. Endrer du constructoren, endres alle fremtidige objekter automatisk.
Constructors i JavaScript er starten på det som kalles objektorientert programmering. Kurset JavaScript for nybegynnere på Utdannet.no, med instruktør Lars Vidar Nordli, viser deg hvordan du bruker constructors til å bygge en handleliste-app fra bunnen av. Du lærer også this-nøkkelordet, metoder og hvordan objekter og DOM-en henger sammen i praksis.
