Forstå konstruktører i JavaScript

JavaScript er et etablert språk, men det ga kun støtte for klassisk objektorientert programmering (OOP) i ES6. Inntil det la til funksjoner som klasseerklæringer, håndterte JavaScript OOP ved å bruke et mindre kjent prototypebasert paradigme. Med begge tilnærmingene kan du imidlertid lage komplekse applikasjoner som bruker objektbaserte funksjoner.

En konstruktør i prototypisk JavaScript ser mye ut som alle andre funksjoner. Hovedforskjellen er at du kan bruke den konstruktørfunksjonen til å lage objekter.

Hva er en konstruktør i JavaScript?

Konstruktører er en av de grunnleggende begrepene i objektorientert programmering. En konstruktør er en funksjon du kan bruke til å lage en forekomst av et objekt. I tillegg til å lage et nytt objekt, spesifiserer en konstruktør egenskapene og virkemåten som skal tilhøre det.

Konstruktørsyntaks

funksjonNameOfConstructor() {
 this.property1 = "Eiendom1";
 this.property2 = "Eiendom2";
 this.property3 = "Eiendom3";
}

Du kan lage en konstruktør med funksjon søkeord siden det i hovedsak er

1. For å skille dem fra andre funksjoner, bruk et navn for konstruktøren din som begynner med stor bokstav.
2. Konstruktører bruker dette søkeord annerledes. Inne i en konstruktør, dette refererer til det nye objektet som konstruktøren vil lage.
3. I motsetning til JavaScript-funksjoner, definerer konstruktører egenskaper og atferd i stedet for å returnere verdier.

Bruke en konstruktør for å lage nye objekter

I JavaScript er det en enkel oppgave å bruke en konstruktør for å lage et objekt. Her er en enkel konstruktør med en påkallelse etter den:

funksjonStudent() {
 dette.navn = "Gloria";
 dette.kjønn = "Hunn";
dette.alder = 19;
}
la kvinnelig student = ny Student();

I dette eksemplet, kvinnelig student er et objekt opprettet fra Student konstruktør. Bruke ny nøkkelord for å kalle funksjonen som en konstruktør. Dette nøkkelordet forteller JavaScript å opprette en ny forekomst av Student. Du bør ikke kalle denne funksjonen uten ny søkeord fordi dette inne i konstruktøren vil ikke peke på et nytt objekt. Etter bygging, kvinnelig student har alle egenskapene til Student. Du kan få tilgang til og endre disse egenskapene akkurat som du ville gjort med et hvilket som helst annet objekt.

Viktige ting å vite om JavaScript-konstruktører

Å jobbe med konstruktører kan være så slitsomt, og samtidig kan det være en enkel oppgave. Her er noen viktige ting enhver utviklere bør vite om å jobbe med konstruktører.

Bruke konstruktører med argumenter

Du kan utvide en konstruktør for å motta argumenter. Dette er veldig viktig hvis du ønsker å skrive responsiv, fleksibel kode.

Hver gang du oppretter et objekt fra en konstruktør, vil objektet arve alle egenskapene som er deklarert i konstruktøren. For eksempel kvinnelig student du opprettet ovenfor vil ha egenskaper Navn, kjønn, og alder med faste startverdier. Mens du kan endre hver egenskap manuelt, ville det vært mye arbeid hvis du skulle skrive et program med mange objekter.

Heldigvis kan JavaScript-konstruktører godta parametere, som alle andre funksjoner. Du kan endre Student konstruktør for å godta to parametere:

funksjonStudent(navn, kjønn) {
dette.navn = navn;
dette.kjønn = kjønn;
dette.alder = 19;
}

Du kan nå definere unike objekter fra samme konstruktør ved å sende inn forskjellige argumenter.

Argumenter gjør konstruktører mer fleksible. De sparer tid og oppmuntrer til ren kode.

Definere objektmetoder

En metode er en objektegenskap som er en funksjon. Metoder forbedrer koden din i OOP ettersom den legger til forskjellig oppførsel til objektene dine. Her er et eksempel:

funksjonStudent(navn, kjønn) {
dette.navn = navn;
dette.kjønn = kjønn;
dette.alder = 19 ;
dette.sayName = funksjon () {
komme tilbake`Jeg heter ${name}`; 
 }
}

Ovennevnte legger til funksjonen siNavn til konstruktøren.

Anta at du bruker denne konstruktøren til å lage et objekt som du lagrer i en variabel, kvinnelig student. Du kan deretter kalle denne funksjonen med koden nedenfor:

kvinnelig student.sayName()

prototypen

Tidligere opprettet vi Student på en måte som alle dens forekomster vil ha en alder eiendom med en verdi på 19. Dette vil resultere i å ha en duplisert variabel for hver Student forekomst du oppretter.

For å unngå denne dupliseringen bruker JavaScript konseptet med prototyper. Alle objekter opprettet fra en konstruktør deler egenskapene til prototypen. Du kan legge til alder eiendom til Student prototype som vist nedenfor:

Student.prototype.age = 19;

Ved å gjøre dette kan alle forekomster av Student vil ha alder eiendom. Erklærer prototype egenskaper er en måte å redusere duplikatkode i applikasjonen din. Det gjør koden din så standard som mulig.

En prototype-eiendom kan være et objekt

Du kan legge til prototypeegenskaper individuelt som forklart ovenfor. Men hvis du har mange eiendommer å legge til, kan dette være upraktisk.

Som et alternativ kan du inneholde alle egenskapene du trenger i et nytt objekt. Ved å gjøre dette vil du angi alle egenskapene samtidig. For eksempel:

Student.prototype = {
 alder: 19,
 løp: "Hvit",
 uførhet: "Ingen"
}

Student.prototype = { 
konstruktør: Student, 
 alder: 19, 
 løp: "Hvit", 
 uførhet: "Ingen"
}

Supertyper og arv

Arv er en metode programmerere bruker for å redusere feil i applikasjonene sine. Det er en måte å holde seg til Ikke gjenta deg selv (TØRR) prinsipp.

Anta at du har to konstruktører—Student og Lærer-som har to lignende prototypeegenskaper.

Student.prototype = { 
konstruktør: Student,
siNavn: funksjon () {
komme tilbake`Jeg heter ${name}`; 
 }
}
Teacher.prototype = { 
konstruktør: Lærer,
siNavn: funksjon () {
komme tilbake`Jeg heter ${name}`;
 }
}

Begge disse konstruktørene definerer siNavn metode, identisk. For å unngå denne unødvendige dupliseringen kan du opprette en supertype.

funksjonIndividuelle detaljer(){};
IndividualDetails.prototype = { 
konstruktør: Individuelle detaljer, 
siNavn: funksjon () {
komme tilbake`Jeg heter ${name}`; 
 }
};

Deretter kan du fjerne siNavn fra begge konstruktørene.

For å arve egenskapene fra supertypen, bruk Object.create(). Du setter prototypen til begge konstruktørene til en forekomst av supertypen. I dette tilfellet setter vi Student og Lærer prototyper til en forekomst av IndividualDetails.

Her er det:

Student.prototype = Gjenstand.create (IndividualDetails.prototype);
Teacher.prototype = Gjenstand.create (IndividualDetails.prototype);

Ved å gjøre dette, Student og Lærer arve alle egenskapene til supertypen, Individuelle detaljer.

Slik øver du på DRY i OOP ved å bruke supertyper.

Konstruktører er Game Changers

Konstruktører er en nøkkelkomponent i JavaScript, og mestring av funksjonaliteten deres er avgjørende for å utvikle OOP JavaScript-applikasjoner. Du kan bruke en konstruktør til å lage objekter som deler egenskaper og metoder. Du kan også bruke arv til å definere objekthierarkier.

I ES6 kan du bruke klasse nøkkelord for å definere klassiske objektorienterte klasser. Denne versjonen av JavaScript støtter også en konstruktør nøkkelord.