Leer hoe u lessen kunt maken in JavaScript

In 2015 werd de ES6-versie van de programmeertaal JavaScript uitgebracht. Deze release introduceerde enkele belangrijke upgrades van de taal en plaatste deze officieel in de categorie van objectgeoriënteerde programmeertaal, naast andere talen zoals Java en C++.

Objectgeoriënteerd programmeren richt zich op objecten en de bewerkingen die daarop kunnen worden uitgevoerd. Voordat u echter objecten kunt hebben, moet u een klasse hebben.

JavaScript-klassen zijn een van de spelveranderende functies die bij de ES6-versie van de taal werden geleverd. Een klasse kan worden omschreven als een blauwdruk die wordt gebruikt om objecten te maken.

In dit zelfstudieartikel leert u hoe u objecten kunt maken en manipuleren met behulp van JavaScript-klassen.

JavaScript-klassenstructuur

Bij het maken van een klasse in JavaScript is er één fundamenteel onderdeel dat u altijd nodig zult hebben: de klas trefwoord. Bijna elk ander aspect van de JavaScript-klasse is niet vereist voor een succesvolle uitvoering.

Een JavaScript-klasse wordt op natuurlijke wijze uitgevoerd als er geen constructor is opgegeven (de klasse zal tijdens de uitvoering eenvoudig een lege constructor maken). Als er echter een JavaScript-klasse wordt gemaakt met constructors en andere functies, maar er geen class-sleutelwoord wordt gebruikt, is deze klasse niet uitvoerbaar.

De klas trefwoord (dat altijd in kleine letters moet zijn) is een noodzaak in de klassenstructuur van JavaScript. Het volgende voorbeeld is de algemene syntaxis van een JavaScript-klasse. De syntaxis van de JavaScript-klasse staat hieronder:

class ClassName{
//klasse lichaam
}

Een klas maken in JavaScript

Bij het programmeren kan een klasse worden gezien als een gegeneraliseerde entiteit die wordt gebruikt om een ​​gespecialiseerd object te maken. In een schoolomgeving kan een gegeneraliseerde entiteit (een klas) bijvoorbeeld studenten zijn en kan een object van studenten John Brown zijn. Maar voordat u een object maakt, moet u de gegevens kennen die het zal opslaan en dit is waar JavaScript Constructors in het spel komt.

Constructors gebruiken in JavaScript-klassen

Een constructor is om een ​​aantal redenen van vitaal belang voor het proces voor het maken van klassen; het initialiseert de status van een object (via zijn attributen) en het wordt automatisch aangeroepen wanneer een nieuw object wordt geïnstantieerd (gedefinieerd en gemaakt).

Een constructorvoorbeeld gebruiken

Hieronder ziet u een voorbeeld van een constructor met een uitleg van wat het betekent.

klas Student{
constructor (voornaam, achternaam, startdatum){
deze.firstName = firstName;
deze.lastName = achternaam;
deze.startDatum = beginDatum;
}
}

De bovenstaande code presenteert een belangrijk aspect van de JavaScript-klassenconstructor; in tegenstelling tot andere talen zoals Java en C++, gebruikt de constructer van een JavaScript de klassenaam niet om een ​​constructer te maken. Het gebruikt de constructeur trefwoord zoals u kunt zien in het bovenstaande voorbeeld.

Verwant: Leer hoe u klassen in Java kunt maken

De constructeur in het bovenstaande voorbeeld neemt drie parameters en gebruikt de deze sleutelwoord om de parameters toe te wijzen aan de huidige instantie van de klasse. Het lijkt misschien een beetje verwarrend, maar wat je moet begrijpen, is dat een klas kan worden gezien als een blauwdruk die wordt gebruikt om veel huizen te maken.

Elk gebouwd huis kan dan worden gezien als een object van deze klasse. Hoewel elk van deze huizen is gemaakt met dezelfde blauwdruk, zijn ze te onderscheiden door hun specifieke geografische locatie of de mensen die ze bezitten.

De deze trefwoord wordt gebruikt om elk object dat door een klasse is gemaakt, te onderscheiden. Het zorgt ervoor dat de juiste gegevens worden opgeslagen en verwerkt voor elk object dat met dezelfde klasse is gemaakt.

Een object maken in JavaScript

Constructors zijn belangrijk in een taal als JavaScript omdat ze het aantal attributen aangeven dat een object van een specifieke klasse zou moeten hebben. Sommige talen vereisen dat een attribuut (variabele) wordt gedeclareerd voordat het in een constructor of andere methoden kan worden gebruikt. Dit is echter niet het geval met JavaScript.

Verwant: Variabelen declareren in JavaScript

Als je naar de constructor van de studentenklasse hierboven kijkt, kun je zien dat een object van deze klasse drie attributen heeft.

Voorbeeld van een object maken

Hieronder ziet u een voorbeeld voor het maken van een object in JavaScript.

// maak een nieuw object
const john = nieuwe student('John', 'Brown', '2018');

De bovenstaande code gebruikt de Student class om een ​​object te maken.

Wanneer u een object van een klasse maakt, moet u de gebruiken nieuwe trefwoord, gevolgd door de klassenaam en de waarden die u aan de respectieve attributen wilt toewijzen. Nu heb je een nieuwe student met de voornaam John, de achternaam Brown en een startdatum van 2018. Je hebt ook een constante variabele: John. Deze variabele is belangrijk omdat je hiermee het aangemaakte object kunt gebruiken.

Zonder de John variabele kunt u nog steeds een nieuw object maken met de Student class, maar dan is er geen manier om toegang te krijgen tot dit object en het te gebruiken met de verschillende methoden van de klasse.

Methoden gebruiken in JavaScript-klassen

Een methode is een functie van een klasse die wordt gebruikt om bewerkingen uit te voeren op objecten die op basis van de klasse zijn gemaakt. Een goede methode om toe te voegen aan de studentenklas is er een die een rapport genereert over elke student.

Voorbeeld van klassenmethoden maken

Hieronder ziet u een voorbeeld voor het maken van klassenmethoden in JavaScript.

klas Student{
constructor (voornaam, achternaam, startdatum){
deze.firstName = firstName;
deze.lastName = achternaam;
deze.startDatum = beginDatum;
}
// rapporteer methode
rapport(){
return `${this.firstName} ${this.lastName} ging naar deze instelling in ${this.startDate}`
}
}

De klasse hierboven bevat een methode die een rapport genereert over elke student die is gemaakt met de Student klas. Om de. te gebruiken rapport() methode moet je een bestaand object van de klasse gebruiken om een ​​eenvoudige functieaanroep te doen.

Dankzij het "create an object example" hierboven zou je een object moeten hebben van de Student klasse die is toegewezen aan de variabele John. Gebruik makend van John, kunt u nu met succes de. bellen rapport() methode.

Voorbeeld van klasmethoden gebruiken

Hieronder ziet u een voorbeeld van het gebruik van klassenmethoden in JavaScript.

// maak een nieuw object
const john = nieuwe student('John', 'Brown', '2018');
// de rapportmethode aanroepen en het resultaat opslaan in een variabele
laat resultaat = john.report();
// het resultaat naar de console afdrukken
console.log (resultaat);

De bovenstaande code gebruikt de studenten class om de volgende uitvoer in de console te produceren:

John Brown ging in 2018 naar deze instelling

Statische methoden gebruiken in JavaScript-klassen

Statische methoden zijn uniek omdat het de enige methoden in een JavaScript-klasse zijn die zonder object kunnen worden gebruikt.

Uit het bovenstaande voorbeeld kunt u de. niet gebruiken rapport() methode zonder een object van de klasse. Dit komt omdat de rapport() methode is gebaseerd op de attributen van een object om een ​​gewenst resultaat te produceren. Als u echter een statische methode wilt gebruiken, hebt u alleen de naam nodig van de klasse waarin de methode is opgeslagen.

Een voorbeeld van een statische methode maken

Hieronder vindt u een voorbeeld van een statische methode voor JavaScript.

klas Student{
constructor (voornaam, achternaam, startdatum){
deze.firstName = firstName;
deze.lastName = achternaam;
deze.startDatum = beginDatum;
}
// rapporteer methode
rapport(){
return `${this.firstName} ${this.lastName} ging naar deze instelling in ${this.startDate}`
}
//statische methode
statische einddatum (startdatum){
retour startDatum + 4;
}
}

Het belangrijkste om op te merken uit het bovenstaande voorbeeld is dat elke statische methode begint met de statisch trefwoord.

Een voorbeeld van een statische methode gebruiken

Hieronder ziet u een voorbeeld voor het gebruik van een statische methode in JavaScript.

// een statische methode aanroepen en het resultaat naar de console afdrukken
console.log (Student.endDate (2018));

De regel code hierboven gebruikt de studenten class om de volgende uitvoer in de console te produceren:

2022

Een JavaScript-klasse maken is eenvoudig

Er zijn verschillende dingen die u moet onthouden als u een JavaScript-klasse wilt maken en er een of meer objecten van wilt instantiëren:

• Een JavaScript-klasse moet de. hebben klas trefwoord.
• Een JavaScript-constructor geeft het aantal waarden aan dat een object kan hebben.
• Algemene klassenmethoden kunnen niet worden gebruikt zonder een object.
• Statische methoden kunnen zonder object worden gebruikt.

De troosten.log() methode wordt in dit artikel gebruikt om de resultaten te geven van het gebruik van zowel de algemene als de statische methoden in een JavaScript-klasse. Deze methode is een handig hulpmiddel voor elke JavaScript-ontwikkelaar omdat het helpt bij het foutopsporingsproces.

Kennismaken met de console.log() methode is een van de belangrijkste dingen die u als JavaScript-ontwikkelaar kunt doen.

Het ultieme JavaScript-spiekbriefje

Krijg een snelle opfriscursus over JavaScript-elementen met deze spiekbrief.

Lees volgende

Over de auteur