Förstå konstruktörer i JavaScript

JavaScript är ett etablerat språk men det gav bara stöd för klassisk objektorienterad programmering (OOP) i ES6. Tills det lade till funktioner som klassdeklarationer, hanterade JavaScript OOP med ett mindre känt prototypbaserat paradigm. Med båda tillvägagångssätten kan du dock skapa komplexa applikationer som använder objektbaserade funktioner.

En konstruktör i prototypisk JavaScript ser ut ungefär som vilken annan funktion som helst. Den största skillnaden är att du kan använda den konstruktorfunktionen för att skapa objekt.

Vad är en konstruktör i JavaScript?

Konstruktörer är en av de grundläggande begreppen inom objektorienterad programmering. En konstruktor är en funktion som du kan använda för att skapa en instans av ett objekt. Förutom att skapa ett nytt objekt, specificerar en konstruktor de egenskaper och beteenden som kommer att tillhöra det.

Konstruktörssyntax

fungeraNameOfConstructor() {
 this.property1 = "Fastighet1";
 this.property2 = "Fastighet2";
 this.property3 = "Fastighet3";
}

Du kan skapa en konstruktör med fungera nyckelord eftersom det i huvudsak är som vilken annan funktion som helst. Konstruktörer följer dock följande konventioner:

1. För att skilja dem från andra funktioner, använd ett namn på din konstruktor som börjar med en stor bokstav.
2. Konstruktörer använder detta sökord annorlunda. Inuti en konstruktör, detta hänvisar till det nya objektet som konstruktören kommer att skapa.
3. Till skillnad från JavaScript-funktioner definierar konstruktörer egenskaper och beteenden istället för att returnera värden.

Använda en konstruktör för att skapa nya objekt

I JavaScript är det en lätt uppgift att använda en konstruktor för att skapa ett objekt. Här är en enkel konstruktor med en anrop efter den:

fungeraStuderande() {
 detta.namn = "Gloria";
 detta.kön = "Kvinna";
detta.ålder = 19;
}
låta kvinnlig Student = ny Studerande();

I det här exemplet, kvinnlig student är ett objekt skapat från Studerande konstruktör. Använd ny nyckelord för att anropa funktionen som en konstruktor. Detta nyckelord talar om för JavaScript att skapa en ny instans av Studerande. Du bör inte anropa den här funktionen utan ny sökord eftersom detta inuti kommer konstruktorn inte att peka på ett nytt objekt. Efter bygget, kvinnlig student har alla egenskaper hos Studerande. Du kan komma åt och ändra dessa egenskaper precis som med vilket annat objekt som helst.

Viktiga saker att veta om JavaScript-konstruktörer

Att arbeta med konstruktörer kan vara så tröttsamt, och samtidigt kan det vara en lätt uppgift. Här är några viktiga saker som alla utvecklare bör veta om att arbeta med konstruktörer.

Använda konstruktörer med argument

Du kan utöka en konstruktor för att ta emot argument. Detta är mycket viktigt om du vill skriva responsiv, flexibel kod.

När du skapar ett objekt från en konstruktor kommer objektet att ärva alla egenskaper som deklarerats i konstruktorn. Till exempel kvinnlig student du skapade ovan kommer att ha egenskaper namn, kön, och ålder med fasta initiala värden. Även om du kan ändra varje egenskap manuellt, skulle det vara mycket arbete om du skrev ett program med många objekt.

Tack och lov kan JavaScript-konstruktörer acceptera parametrar, som alla andra funktioner. Du kan ändra Studerande konstruktör för att acceptera två parametrar:

fungeraStuderande(namn, kön) {
detta.namn = namn;
detta.gender = genus;
detta.ålder = 19;
}

Du kan nu definiera unika objekt från samma konstruktor genom att skicka in olika argument.

Argument gör konstruktörer mer flexibla. De sparar tid och uppmuntrar ren kod.

Definiera objektmetoder

En metod är en objektegenskap som är en funktion. Metoder förbättrar din kod i OOP eftersom den lägger till olika beteenden till dina objekt. Här är ett exempel:

fungeraStuderande(namn, kön) {
detta.namn = namn;
detta.gender = genus;
detta.ålder = 19 ;
detta.sayName = fungera () {
lämna tillbaka`Jag heter ${name}`; 
 }
}

Ovanstående lägger till funktionen säg Namn till konstruktören.

Anta att du använder den här konstruktorn för att skapa ett objekt som du lagrar i en variabel, kvinnlig student. Du kan sedan anropa denna funktion med koden nedan:

kvinnlig student.sayName()

Prototypen

Tidigare skapade vi Studerande på ett sätt som alla dess instanser kommer att ha en ålder fastighet med ett värde av 19. Detta kommer att resultera i en duplicerad variabel för var och en Studerande instans du skapar.

För att undvika denna dubblering använder JavaScript konceptet med prototyper. Alla objekt skapade från en konstruktor delar egenskaperna hos dess prototyp. Du kan lägga till ålder egendom till Studerande prototyp som visas nedan:

Student.prototype.age = 19;

Genom att göra detta, alla instanser av Studerande kommer att ha ålder fast egendom. Deklarerar prototypegenskaper är ett sätt att minska dubblettkoden i din applikation. Det gör din kod så standard som möjligt.

En prototypegenskap kan vara ett objekt

Du kan lägga till prototypegenskaper individuellt enligt beskrivningen ovan. Men om du har många egenskaper att lägga till kan detta vara obekvämt.

Som ett alternativ kan du innehålla alla egenskaper du behöver i ett nytt objekt. Genom att göra detta ställer du in alla egenskaper på en gång. Till exempel:

Student.prototype = {
 ålder: 19,
 lopp: "Vit",
 handikapp: "Ingen"
}

Student.prototype = { 
konstruktör: Studerande, 
 ålder: 19, 
 lopp: "Vit", 
 handikapp: "Ingen"
}

Supertyper och arv

Arv är en metod som programmerare använder för att minska fel i sina applikationer. Det är ett sätt att hålla sig till Upprepa inte dig själv (TORR) princip.

Anta att du har två konstruktörer—Studerande och Lärare— som har två liknande prototypegenskaper.

Student.prototype = { 
konstruktör: Studerande,
säg Namn: fungera () {
lämna tillbaka`Jag heter ${name}`; 
 }
}
Teacher.prototype = { 
konstruktör: Lärare,
säg Namn: fungera () {
lämna tillbaka`Jag heter ${name}`;
 }
}

Båda dessa konstruktörer definierar säg Namn metod, identiskt. För att undvika denna onödiga dubblering kan du skapa en supertyp.

fungeraIndividuella detaljer(){};
IndividualDetails.prototype = { 
konstruktör: Individual Details, 
säg Namn: fungera () {
lämna tillbaka`Jag heter ${name}`; 
 }
};

Du kan sedan ta bort säg Namn från båda konstruktörerna.

För att ärva egenskaperna från supertypen, använd Object.create(). Du ställer in prototypen för båda konstruktörerna till en instans av supertypen. I det här fallet ställer vi in Studerande och Lärare prototyper till en instans av IndividualDetails.

Här är det:

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

Genom att göra det här, Studerande och Lärare ärva supertypens alla egenskaper, Individuella detaljer.

Så här tränar du DRY i OOP med hjälp av supertyper.

Konstruktörer är Game Changers

Konstruktörer är en nyckelkomponent i JavaScript, och att behärska deras funktionalitet är avgörande för att utveckla OOP JavaScript-applikationer. Du kan använda en konstruktor för att skapa objekt som delar egenskaper och metoder. Du kan också använda arv för att definiera objekthierarkier.

I ES6 kan du använda klass nyckelord för att definiera klassiska objektorienterade klasser. Denna version av JavaScript stöder också en konstruktör nyckelord.