Forstå konstruktører i JavaScript

JavaScript er et etableret sprog, men det tilføjede kun understøttelse af klassisk objektorienteret programmering (OOP) i ES6. Indtil det tilføjede funktioner som klasseerklæringer, håndterede JavaScript OOP ved hjælp af et mindre kendt prototypebaseret paradigme. Med begge tilgange kan du dog oprette komplekse applikationer, der bruger objektbaserede funktioner.

En konstruktør i prototypisk JavaScript ligner meget enhver anden funktion. Den største forskel er, at du kan bruge denne konstruktørfunktion til at oprette objekter.

Hvad er en konstruktør i JavaScript?

Konstruktører er en af de grundlæggende begreber i objektorienteret programmering. En konstruktør er en funktion, du kan bruge til at oprette en instans af et objekt. Ud over at skabe et nyt objekt specificerer en konstruktør de egenskaber og adfærd, der hører til det.

Konstruktør syntaks

fungereNameOfConstructor() {
 denne.ejendom1 = "Ejendom 1";
 denne.ejendom2 = "Ejendom 2";
 denne.ejendom3 = "Ejendom 3";
}

Du kan oprette en konstruktør med

1. For at skelne dem fra andre funktioner skal du bruge et navn til din konstruktør, der begynder med et stort bogstav.
2. Konstruktører bruger det her søgeord anderledes. Inde i en konstruktør, det her henviser til det nye objekt, som konstruktøren vil oprette.
3. I modsætning til JavaScript-funktioner definerer konstruktører egenskaber og adfærd i stedet for at returnere værdier.

Brug af en konstruktør til at skabe nye objekter

I JavaScript er det en let opgave at bruge en konstruktør til at oprette et objekt. Her er en simpel konstruktør med en invokation efter den:

fungereStuderende() {
 dette.navn = "Gloria";
 dette.køn = "Kvinde";
det her.alder = 19;
}
lade kvindelig elev = ny Studerende();

I dette eksempel, kvindelig Student er et objekt skabt ud fra Studerende konstruktør. Brug ny nøgleord for at kalde funktionen som en konstruktør. Dette søgeord fortæller JavaScript om at oprette en ny forekomst af Studerende. Du bør ikke kalde denne funktion uden ny søgeord, fordi det her inde i konstruktøren vil ikke pege på et nyt objekt. Efter byggeriet, kvindelig Student har alle egenskaber af Studerende. Du kan få adgang til og ændre disse egenskaber ligesom med ethvert andet objekt.

Vigtige ting at vide om JavaScript-konstruktører

At arbejde med konstruktører kan være så trættende, og det kan samtidig være en let opgave. Her er nogle vigtige ting, som enhver udvikler bør vide om at arbejde med konstruktører.

Brug af konstruktører med argumenter

Du kan udvide en konstruktør til at modtage argumenter. Dette er meget vigtigt, hvis du ønsker at skrive lydhør, fleksibel kode.

Når du opretter et objekt fra en konstruktør, vil objektet arve alle de egenskaber, der er erklæret i konstruktøren. For eksempel kvindelig Student du oprettede ovenfor vil have egenskaber navn, køn, og alder med faste begyndelsesværdier. Selvom du kan ændre hver egenskab manuelt, ville det være meget arbejde, hvis du skrev et program ved hjælp af mange objekter.

Heldigvis kan JavaScript-konstruktører acceptere parametre, ligesom enhver anden funktion. Du kan ændre Studerende konstruktør til at acceptere to parametre:

fungereStuderende(navn, køn) {
det her.navn = navn;
det her.køn = køn;
det her.alder = 19;
}

Du kan nu definere unikke objekter fra den samme konstruktør ved at indsætte forskellige argumenter.

Argumenter gør konstruktører mere fleksible. De sparer tid og tilskynder til ren kode.

Definition af objektmetoder

En metode er en objektegenskab, der er en funktion. Metoder forbedrer din kode i OOP, da den tilføjer forskellig adfærd til dine objekter. Her er et eksempel:

fungereStuderende(navn, køn) {
det her.navn = navn;
det her.køn = køn;
det her.alder = 19 ;
det her.sayName = fungere () {
Vend tilbage'Mit navn er ${name}`; 
 }
}

Ovenstående tilføjer funktionen sig Navn til konstruktøren.

Antag, at du bruger denne konstruktør til at skabe et objekt, som du gemmer i en variabel, kvindelig Student. Du kan derefter kalde denne funktion med koden nedenfor:

kvindelig Student.sayName()

Prototypen

Tidligere skabte vi Studerende på en måde, så alle dens forekomster vil have en alder ejendom med en værdi på 19. Dette vil resultere i at have en duplikeret variabel for hver Studerende instans du opretter.

For at undgå denne duplikering bruger JavaScript konceptet med prototyper. Alle objekter oprettet fra en konstruktør deler egenskaberne for dens prototype. Du kan tilføje alder ejendom til Studerende prototype som vist nedenfor:

Student.prototype.age = 19;

Ved at gøre dette kan alle forekomster af Studerende vil have alder ejendom. Erklærer prototype egenskaber er en måde at reducere duplikatkode i din applikation. Det gør din kode så standard som muligt.

En prototype-egenskab kan være et objekt

Du kan tilføje prototypeegenskaber individuelt som forklaret ovenfor. Men hvis du har mange ejendomme at tilføje, kan dette være ubelejligt.

Som et alternativ kan du indeholde alle de egenskaber, du har brug for, i et nyt objekt. Ved at gøre dette indstiller du alle egenskaberne på én gang. For eksempel:

Student.prototype = {
 alder: 19,
 race: "hvid",
 handicap: "Ingen"
}

Student.prototype = { 
konstruktør: Student, 
 alder: 19, 
 race: "hvid", 
 handicap: "Ingen"
}

Supertyper og arv

Arv er en metode, programmører anvender til at reducere fejl i deres applikationer. Det er en måde at holde sig til Gentag ikke dig selv (TØR) princip.

Antag, at du har to konstruktører—Studerende og Lærer-der har to lignende prototypeegenskaber.

Student.prototype = { 
konstruktør: Student,
sigNavn: fungere () {
Vend tilbage'Mit navn er ${name}`; 
 }
}
Teacher.prototype = { 
konstruktør: Lærer,
sigNavn: fungere () {
Vend tilbage'Mit navn er ${name}`;
 }
}

Begge disse konstruktører definerer sig Navn metode, identisk. For at undgå denne unødvendige overlapning kan du oprette en supertype.

fungereIndividuelle detaljer(){};
IndividualDetails.prototype = { 
konstruktør: Individuelle detaljer, 
sigNavn: fungere () {
Vend tilbage'Mit navn er ${name}`; 
 }
};

Du kan derefter fjerne sig Navn fra begge konstruktører.

For at arve egenskaberne fra supertypen skal du bruge Object.create(). Du indstiller prototypen for begge konstruktører til en forekomst af supertypen. I dette tilfælde indstiller vi Studerende og Lærer prototyper til en forekomst af IndividualDetails.

Her er det:

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

Ved at gøre dette, Studerende og Lærer arve alle supertypens egenskaber, Individuelle detaljer.

Sådan øver du DRY i OOP ved hjælp af supertyper.

Konstruktører er spilskiftere

Konstruktører er en nøglekomponent i JavaScript, og det er afgørende at mestre deres funktionalitet for at udvikle OOP JavaScript-applikationer. Du kan bruge en konstruktør til at oprette objekter, der deler egenskaber og metoder. Du kan også bruge arv til at definere objekthierarkier.

I ES6 kan du bruge klasse nøgleord til at definere klassiske objektorienterede klasser. Denne version af JavaScript understøtter også en konstruktør søgeord.