Javascript nieuwe klasse

| | | | | |

JavaScript is gebaseerd op prototypes. Elke keer dat u een object declareert, wordt een prototype-eigenschap gemaakt, die de eigenschappen en methoden die aan dat object zijn gekoppeld uitbreidt.

In de afgelopen jaren hebben veel JavaScript-ontwikkelaars manieren gezocht om objecten te oriënteren om ze in te sluiten. ontwerp objecten in hun code. Hierdoor ontstond een nieuw type object in JavaScript, een klasse die een prototype uitbreidt.

In deze handleiding bespreken we wat klassen zijn, waarom ze worden gebruikt en hoe u een klasse in uw code. We geven een voorbeeld om u op weg te helpen met klassen.

Wat is een JavaScript-klasse?

Klassen zijn een manier om een model voor een object te declareren.


p>

Als u bekend bent met objectgeoriënteerde programmeertalen, weet u dat deze sterk afhankelijk zijn van klassen en objecten. Een klasse is als een sjabloon voor een gegevenstype: er staat welke gegevens kunnen worden opgeslagen en welke methoden toegankelijk zijn. Een object is een instantie van deze klasse.

Een voorbeeld van een klasse is Boek. Deze klasse zou de blauwdruk bevatten voor welke informatie in de boeken zou kunnen worden opgeslagen en hoe die gegevens zouden kunnen worden gewijzigd. Een object kan een tram zijn die begeerte wordt genoemd, wat een individueel boek is.

In JavaScript zijn klassen wat we syntactische suiker noemen. De syntaxis van de klassen is leuk om te hebben, maar ze voegen niet noodzakelijk nieuwe functionaliteit toe.

Klassen worden vaak gebruikt in moderne JavaScript-frameworks zoals React en Next.js.

lessen met betrekking tot functies

Als je je één ding uit dit artikel herinnert, of het nu deze is: klassen zijn heel normale functies

het enige verschil tussen een klasse en een functie-uitdrukking is de manier waarop ze worden gedeclareerd, functies gebruiken het trefwoord en klassen gebruiken de klasse . technisch trefwoord, je kunt een klasse declareren zonder zelfs het trefwoord class te gebruiken

we kunnen zeggen dat ze hetzelfde zijn door twee functies te maken en hun prototypes af te drukken.

p>

Onze klasse- en functie-expressie geeft als resultaat:

function ()

function ()

de twee onze functies en klassen gebruiken dezelfde boogaflezing op basis van een prototype.

Hoe definieer je een klasse? dat is een goede vraag.

Je kunt een klas definiëren met het trefwoord . Nadat u een klasse hebt gedefinieerd, kunt u de functie constructor () gebruiken om deze te initialiseren met standaardwaarden.

Open een JavaScript-console en plak deze code:.

p>

Hiermee wordt een klasse gemaakt met de naam Boek. Onze klasse kan twee waarden opslaan, Titel en Auteur, die we hebben gedefinieerd in onze klassenconstructiemethode. Om een object van deze klasse te maken, kunnen we deze code gebruiken:

We kunnen de waarden ‚Äã‚Äãvan onze klasse ophalen zoals elk object:

Onze code geeft als resultaat:. Een van de voordelen van het gebruik van klassen op prototypes is dat je een methode binnen een klasse kunt declareren. Dit betekent dat u de syntaxis prototype niet hoeft te gebruiken om een nieuwe methode aan een bestaande functie toe te voegen

Laten we dit voorbeeld nemen:

We hebben een methode gedeclareerd genaamd GetDetails () die in onze klasse bestaat. Het is leuk, omdat het al onze code bij elkaar houdt. We noemen onze functie GetDetails ():

Onze code geeft als resultaat:

een verlangen genaamd tram is een boek geschreven door Tennessee Williams

Lesson Inherit

Zoals in elke objectgeoriënteerde structuur kunnen klassen eigenschappen erven van andere klassen.

Overerving verwijst naar een proces waarbij een onderliggende klasse heeft toegang tot de methoden en gegevens van een bovenliggende klasse. Om van een klas te erven, kunt u het sleutelwoord Extend gebruiken. Maak een JavaScript-bestand of open uw JavaScript-console en plak deze code:

We hebben een klasse gemaakt met de naam fictie die de klasse gebruikt uit het boek dat we eerder als een project hebben gedeclareerd. In onze code hebben we het sleutelwoord super () gebruikt om de titel en waarden ‚Äã‚Äã te erven van de auteur van de bovenliggende klasse, namelijk Boek. We hebben dus een nieuw attribuut gedefinieerd, fiction, waarvan de waarde standaard is ingesteld op true

We gaan een object maken van onze nieuwe fictieklasse.

Onze code geeft als resultaat: true. De klasse fictie slaat een element op met de naam fictie dat standaard waar is. Als we probeerden toegang te krijgen tot deze waarde vanuit een instantie van de klasse Book, wordt er niets geretourneerd. Inderdaad, "fictie" is toegankelijk in onze fictieklasse.

Getter en Setter

Als je met klassen werkt, moet je de getter- en setter-functies gebruiken.

Get-functies stellen u in staat om methoden van een klasse op te halen. Met Setter-functies kunt u de waarde van een bepaald element in een klasse wijzigen. Deze functies worden aangegeven met respectievelijk de trefwoorden get en samen

Denk aan de volgende code:.

In dit voorbeeld hebben we twee methoden gedeclareerd met de naam author. Een van deze methoden stelt ons in staat om de waarde van author op te halen; dit is onze get-methode. De andere methode stelt ons in staat om de auteur waarde te veranderen

We kunnen het in actie zien met de volgende code:.

Onze code geeft als resultaat: Tennessee Williams

Wij initialiseerde een object met de naam tra m en gaf de titel A Streetcar Named Desire. We hebben dan de auteur waarde Tennessee Williams met behulp van de componist die we in onze code hebben gedefinieerd. Ten slotte hebben we de waarde auteur op de console afgedrukt met behulp van de play-methode.

Conclusie

Hoewel klassen niet overeenkomen met de nieuwe JavaScript-functionaliteit, maken ze schrijffuncties gemakkelijker te begrijpen als je gewend bent aan objectgeoriënteerd programmeren.

Abstracte ontwerpklassen op basis van een JavaScript-prototype, zodat het meer objectgeoriënteerd lijkt. Het woord "look" is cruciaal omdat, onthoud, klassen functies zijn. Klassen zijn niets meer dan syntactische suiker.

Je bent nu klaar om klassen te gaan gebruiken als een JavaScript-expert!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method