Constructors in JavaScript begrijpen

JavaScript is een gevestigde taal, maar het heeft alleen ondersteuning toegevoegd voor klassiek objectgeoriënteerd programmeren (OOP) in ES6. Totdat het functies zoals klassedeclaraties toevoegde, behandelde JavaScript OOP met behulp van een minder bekend prototype-gebaseerd paradigma. Met beide benaderingen kunt u echter complexe toepassingen maken die objectgebaseerde functies gebruiken.

Een constructor in prototypisch JavaScript lijkt veel op elke andere functie. Het belangrijkste verschil is dat u die constructorfunctie kunt gebruiken om objecten te maken.

Wat is een constructeur in JavaScript?

Constructeurs zijn er een van de fundamentele concepten in objectgeoriënteerd programmeren. Een constructor is een functie die u kunt gebruiken om een ​​instantie van een object te maken. Naast het maken van een nieuw object, specificeert een constructor de eigenschappen en gedragingen die daarbij horen.

Constructor-syntaxis

functieNameOfConstructor() {
 deze.eigenschap1 = "Eigenschap1";
 deze.eigenschap2 = "Eigendom2";
 deze.eigenschap3 = "Eigendom3";
}

U kunt een constructor maken met de functie trefwoord omdat het in wezen is zoals elke andere functie. Constructeurs houden zich echter aan de volgende conventies:

1. Om ze te onderscheiden van andere functies, gebruikt u een naam voor uw constructor die begint met een hoofdletter.
2. Constructeurs gebruiken de dit trefwoord anders. Binnen een constructeur, dit verwijst naar het nieuwe object dat de constructor zal maken.
3. In tegenstelling tot JavaScript-functies definiëren constructors eigenschappen en gedragingen in plaats van waarden te retourneren.

Een constructor gebruiken om nieuwe objecten te maken

In JavaScript is het gebruik van een constructor om een ​​object te maken een gemakkelijke taak. Hier is een eenvoudige constructor met een aanroep erachter:

functieStudent() {
 deze.naam = "Gloria";
 dit.geslacht = "Vrouwelijk";
dit.leeftijd = 19;
}
laten vrouwelijke Student = nieuw Student();

In dit voorbeeld studente is een object gemaakt op basis van de Student constructeur. Gebruik de nieuw trefwoord om de functie als constructor aan te roepen. Dit sleutelwoord vertelt JavaScript om een ​​nieuw exemplaar van te maken Student. U mag deze functie niet aanroepen zonder de nieuw trefwoord omdat de dit binnen de constructor zal niet naar een nieuw object wijzen. Na de bouw, studente heeft alle eigenschappen van Student. U kunt deze eigenschappen openen en wijzigen zoals u dat met elk ander object zou doen.

Belangrijke dingen die u moet weten over JavaScript-constructors

Werken met constructeurs kan zo vermoeiend zijn en tegelijkertijd een gemakkelijke taak. Hier zijn enkele belangrijke dingen die elke ontwikkelaar moet weten over het werken met constructeurs.

Constructors gebruiken met argumenten

U kunt een constructor uitbreiden om argumenten te ontvangen. Dit is erg belangrijk als u responsieve, flexibele code wilt schrijven.

Telkens wanneer u een object van een constructor maakt, erft het object alle eigenschappen die in de constructor zijn opgegeven. Bijvoorbeeld de studente die u hierboven hebt gemaakt, hebben eigenschappen naam, geslacht, En leeftijd met vaste beginwaarden. Hoewel u elke eigenschap handmatig kunt wijzigen, zou het veel werk zijn als u een programma zou schrijven met veel objecten.

Gelukkig kunnen JavaScript-constructors parameters accepteren, net als elke andere functie. U kunt de Student constructor om twee parameters te accepteren:

functieStudent(Naam / Geslacht) {
dit.naam = naam;
dit.geslacht = geslacht;
dit.leeftijd = 19;
}

U kunt nu unieke objecten van dezelfde constructor definiëren door verschillende argumenten door te geven.

Argumenten maken constructeurs flexibeler. Ze besparen tijd en moedigen schone code aan.

Objectmethoden definiëren

Een methode is een objecteigenschap die een functie is. Methoden verbeteren uw code in OOP omdat het ander gedrag aan uw objecten toevoegt. Hier is een voorbeeld:

functieStudent(Naam / Geslacht) {
dit.naam = naam;
dit.geslacht = geslacht;
dit.leeftijd = 19 ;
dit.zegNaam = functie () {
opbrengst'Mijn naam is ${naam}`; 
 }
}

Het bovenstaande voegt de functie toe zegNaam aan de constructeur.

Stel dat u deze constructor gebruikt om een ​​object te maken dat u opslaat in een variabele, studente. Deze functie kun je dan aanroepen met onderstaande code:

studente.zegNaam()

het prototype

Eerder creëerden we Student op een manier dat al zijn instanties een leeftijd onroerend goed met een waarde van 19. Dit zal resulteren in een gedupliceerde variabele voor elk Student instantie die u maakt.

Om deze duplicatie te voorkomen, gebruikt JavaScript het concept van prototypes. Alle objecten die vanuit een constructor zijn gemaakt, delen de eigenschappen van het prototype. U kunt de leeftijd eigendom aan Student prototype zoals hieronder weergegeven:

Student.prototype.leeftijd = 19;

Door dit te doen, worden alle gevallen van Student zal de leeftijd eigendom. verklaren prototype eigenschappen is een manier om dubbele code in uw toepassing te verminderen. Het maakt je code zo standaard mogelijk.

Een prototype-eigenschap kan een object zijn

U kunt Prototype-eigenschappen afzonderlijk toevoegen, zoals hierboven uitgelegd. Maar als u veel eigenschappen wilt toevoegen, kan dit onhandig zijn.

Als alternatief kunt u alle gewenste eigenschappen in een nieuw object opnemen. Door dit te doen, stelt u alle eigenschappen in één keer in. Bijvoorbeeld:

Student.prototype = {
 leeftijd: 19,
 race: "Wit",
 onbekwaamheid: "Geen"
}

Student.prototype = { 
constructeur: Student, 
 leeftijd: 19, 
 race: "Wit", 
 onbekwaamheid: "Geen"
}

Supertypes en overerving

Erfenis is een methode die programmeurs gebruiken om fouten in hun applicaties te verminderen. Het is een manier om vast te houden aan de Herhaal jezelf niet (DROOG) beginsel.

Stel dat je twee constructors hebt—Student En Docent- die twee vergelijkbare prototype-eigenschappen hebben.

Student.prototype = { 
constructeur: Student,
zegNaam: functie () {
opbrengst'Mijn naam is ${naam}`; 
 }
}
Leraar.prototype = { 
constructeur: Docent,
zegNaam: functie () {
opbrengst'Mijn naam is ${naam}`;
 }
}

Beide constructeurs definiëren de zegNaam methode, identiek. Om deze onnodige duplicatie te voorkomen, kunt u een supertype.

functieIndividuele gegevens(){};
IndividualDetails.prototype = { 
constructeur: Individuele gegevens, 
zegNaam: functie () {
opbrengst'Mijn naam is ${naam}`; 
 }
};

U kunt dan verwijderen zegNaam van beide constructeurs.

Gebruik om de eigenschappen van het supertype te erven Object.create(). Je stelt het prototype van beide constructors in op een instantie van het supertype. In dit geval stellen we de Student En Docent prototypen naar een instantie van IndividualDetails.

Hier is het:

Student.prototype = Voorwerp.creëer (IndividualDetails.prototype);
Leraar.prototype = Voorwerp.creëer (IndividualDetails.prototype);

Door dit te doen, Student En Docent erven alle eigenschappen van het supertype, Individuele gegevens.

Zo oefen je DRY in OOP met behulp van supertypes.

Constructeurs zijn game-wisselaars

Constructors zijn een belangrijk onderdeel van JavaScript en het beheersen van hun functionaliteit is cruciaal voor het ontwikkelen van OOP JavaScript-applicaties. U kunt een constructor gebruiken om objecten te maken die eigenschappen en methoden delen. U kunt overerving ook gebruiken om objecthiërarchieën te definiëren.

In ES6 kunt u de klas trefwoord om klassieke objectgeoriënteerde klassen te definiëren. Deze versie van JavaScript ondersteunt ook een constructeur trefwoord.