Introductie van op objecten georiënteerd JavaScript

Om een ​​of andere reden is er een tendens in de IT-industrie om te veronderstellen dat als je geen Object Oriented Programming (OOP) -methoden gebruikt, je geen "echte programmeur" bent. Dat is eigenlijk een ietwat dwaze opstelling, omdat er veel situaties zijn waarin OOP niet de meest geschikte manier is om met een probleem om te gaan. Dit is de fout in talen als Java die OOP dwingen tot elke programmeertaak, of je het nu nodig hebt of niet.

JavaScript (dat bijna niets met Java te maken heeft) is een heel andere taal. Het biedt vrijwel onbeperkte vrijheid en veelzijdigheid, met minder complexiteit op de meeste gebieden. Helaas zijn er enkele dingen die gecompliceerder zijn in JavaScript vanwege de vrijheid die het je probeert te geven.

Waarom OOP niet altijd geschikt is voor elke taak, is dat het meer complexiteit toevoegt aan een programma en vaak extra stappen, meer werk en meer dingen met zich meebrengt die mogelijk verkeerd kunnen gaan als u niet oplet. Maar OOP kan ook veel voordelen bieden als het wordt gebruikt in situaties waarin het geschikt is.

Het belangrijkste voordeel dat OOP ons kan bieden is replicatie, wat betekent dat we een object kunnen klonen en het meerdere keren in hetzelfde programma kunnen gebruiken, wanneer we het nodig hebben. De impliciete complexiteit en het feit dat JavaScript vanaf het begin niet als een OOP-taal is gebouwd (waardoor er meer complexiteit is toegevoegd), is een van de redenen waarom OOP de laatste grens vormt voor veel jonge JavaScript-programmeurs voordat ze hun vleugels ophalen.

OK, het is moeilijk, maar zo moeilijk is het niet

Voordat je begint te denken dat het concept van Object Oriented JavaScript te veel voor je is, kun je ervan uitgaan dat je OOP al gebruikt, zelfs als je je er niet van bewust bent. Puristen zijn het misschien oneens, maar ik denk dat het eerlijk is om te zeggen dat als je al HTML en CSS gebruikt en je af en toe JavaScript hebt gebruikt om HTML-elementen op een webpagina te manipuleren, je al een ervaren OOP-programmeur bent.

Elk HTML-element op een webpagina is eigenlijk een object. Ze passen allemaal in de hiërarchie van het document-objectmodel (DOM), wat betekent dat ze een gedefinieerde klasse, gedefinieerde eigenschappen en gedefinieerde overerving hebben. Tenzij u expliciet een eigenschapswaarde instelt, gebruiken alle objecten hun standaard eigenschapswaarden. Wanneer u een CSS-instructie schrijft, gebeurt er feitelijk dat u een methode gebruikt om een ​​of meer eigenschapswaarden van een klasse te wijzigen.

Telkens wanneer u een HTML-instructie schrijft, maakt u een nieuw exemplaar van een klasse. En zoals u zeker al weet, kunt u uw eigen klassen maken op basis van de vooraf gedefinieerde klasse van elk objecttype (u kunt bijvoorbeeld <h2 class = "subheading"> maken die mogelijk heel andere eigenschappen heeft dan de oorspronkelijke klasse het is gemaakt van). U kunt aangeven dat H2-objecten met deze klasse een andere kleur en grootte hebben dan de normale H2-objecten. En u kunt die gewijzigde objecten zo vaak opnieuw gebruiken als u wilt. Het originele H2-object is een objectsjabloon en uw nieuwe klasse is afgeleid van de sjabloonklasse.

Dus ja, OOP is niet gemakkelijk, maar je doet het waarschijnlijk al, dus waar moet je bang voor zijn?

Het volgende niveau: je eigen objecten maken

Werken met ingebouwde DOM-objecten is te gemakkelijk. Je hebt meer uitdagingen nodig. Het maken van je eigen objecten is de eerste stap naar een hoger niveau van OOP.

Met al die preambules verwacht je waarschijnlijk dat het maken van een object een groot probleem is waarvoor veel complexe code vereist is. Zeker als je ooit hebt geprobeerd om aangepaste objectklassen te maken in een taal als Java of C #, verwacht je een langdurige klassenconstructeur te maken. Hier is hoe we het doen in JavaScript:

Nou dat was antiklimaat, toch? Wat we daar deden was dat we een leeg object van klasse "myObject" hebben gemaakt. Blijkbaar zijn lege objecten saai, omdat ze niets doen, behalve ruimte in het geheugen opnemen. Om nuttig te zijn, moet een object inhoud hebben. Laten we een meer praktische les overwegen:

Het bovenstaande toont een objAlien object met al deze verschillende eigenschappen (gewone variabelen) en methoden (functie) die erin zijn gedefinieerd. Technisch gezien zou je een object dus ook als een array van variabelen en / of functies kunnen beschouwen.

Objecten in een programma gebruiken

Nadat een object is gedefinieerd, kunt u ernaar verwijzen in uw programma's. In een game zou je meerdere aliens hebben, maar het schrijven van code voor elke individuele alien zou het programma te omslachtig maken. Een betere manier is om een ​​array te maken om alle buitenaardse wezens op te slaan en vervolgens de buitenaardse klasse te gebruiken om nieuwe aliens te maken. Bijvoorbeeld:

Deze code zou 20 slijmerige groene buitenaardse wezens maken die 110 pixels van elkaar scheiden (dus we kunnen hieruit raden dat de afbeelding die wordt gebruikt om het buitenaards wezen op te slaan 100px breed is en dat er een 10px-marge is tussen elke alien). Uiteraard is dit natuurlijk geen goede manier om een ​​game in JavaScript te implementeren omdat er betere technieken zijn, maar dit artikel gaat niet over het maken van games, maar over het maken en gebruiken van objecten.

Objecten hoeven niet altijd met het nieuwe sleutelwoord te worden toegevoegd. Hier is een voorbeeld van de code van een project waarbij een object zijn eigen eigenschappen instelt met behulp van de waarden van een ander object:

Hier kunnen we een heel complexe manier zien om een ​​object te gebruiken, waarbij de waarden van het object worden doorgegeven aan de attr-eigenschap van het R-object. Als u bekend bent met JSON (JavaScript Object Notation), dan denkt u misschien dat het eerste deel van het voorbeeld JSON gebruikt met syntaxisfouten, maar in feite is dit geen JSON-code.

De reden waarom de variabelenamen, behalve vullen, worden vermeld, is om te voorkomen dat JavaScript de min-operator in de variabelenamen verwerkt (dit zijn CSS-eigenschappen). Sinds dat programma is geschreven, zijn wijzigingen aangebracht om CSS-eigenschappen zoals font-family als fontFamily te kunnen schrijven, maar deze oude code is niet aangepast om van die wijziging te profiteren.

Waarom objecten gebruiken?

Objecten zijn het beste voor situaties waarin u meerdere exemplaren van iets moet maken, of waar u een eenvoudige manier nodig hebt om gegevens te groeperen die betrekking hebben op iets van een bepaald type. In het bovenstaande spelvoorbeeld kunnen we zien dat het mogelijk was om meerdere exemplaren van het objAlien-object te maken, maar we konden ook eigenschappen van het object manipuleren nadat we het hadden toegevoegd, wat in het geval van het voorbeeld de x-eigenschap was.

Wanneer geen objecten gebruiken?

Je zou geen objecten moeten gebruiken als je project ze niet echt nodig heeft. Het heeft geen zin om uw programma's te zwaar te maken zonder een goede reden. Als uw programma is ontworpen om iets simpels te doen, zijn OOP-technieken niet vereist.

Waarom JavaScript-objecten eenvoudiger kunnen worden gemaakt dan objecten in andere OOP-talen

In talen zoals Java en zelfs Visual Basic is het maken van objecten een grote taak. Dit komt omdat je een klassesjabloon moet maken (of een bestaande sjabloon moet gebruiken) om je object te baseren voordat je het kunt definiëren. Dat is niet nodig in JavaScript, omdat we een eenvoudige constructietechniek krijgen (objectnaam = {...}). Objecten in JavaScript kunnen ook elk type variabele bevatten, inclusief arrays, en typeaangiften bestaan ​​niet. Retourwaarden zijn optioneel.

Of het een goede zaak of een slechte zaak is, is een kwestie van discussie, maar JavaScript-programma's zullen ook niet falen als u probeert een eigenschapswaarde op te roepen die niet bestaat. Bijvoorbeeld, als je getypt hebt:

Je zou heel terecht verwachten dat de bovenstaande coderegel 5 in het element met ID "par1" plaatst. Maar als je iets zou typen als:

Je zou de favoriete smaak van de alien niet zien, je zou undefined zien verschijnen in par1. Voor de meeste toepassingen zou dit geen probleem zijn, maar voor sommigen zou het dat wel zijn. In die gevallen moet je daarop voorbereid zijn en code schrijven die voor geldige waarden test voordat je erop vertrouwt.

Een manier om dit te testen is:

Die reactie is een beetje extreem, maar je begrijpt het wel. Merk op dat we testen voor "! ==" en niet "! =", Wat een gemakkelijk ding is om in de war te raken. Hier is een andere manier om het te doen:

Hetzelfde, op een andere manier. U kunt ook eigenschappen aan objecten toevoegen nadat u ze hebt gemaakt. U kunt dat op de volgende manier doen:

Vanzelfsprekend kunt u de waarden van de eigenschappen ook op dezelfde manier wijzigen. Om de eigenschap favoriteFlavor uit het object te verwijderen, moeten we dit doen:

Er zijn maar weinig situaties waarin dit ooit nodig zou zijn.

Objecten herbruikbaar maken

Je hebt waarschijnlijk het grootste potentiële probleem met het maken van objecten opgemerkt, namelijk dat als je verschillende soorten aliens wilde hebben, je de objAlien.type-eigenschap een array moest maken. Maar er is een andere manier, die beter is.

Deze techniek wordt object-prototyping genoemd, wat betekent dat u een basissjabloon voor het object maakt, maar niet alle details invult. Ook hier komen we dichter bij de echte manier om objecten aan een game toe te voegen.

U kunt nu zien dat de methoden van het object zijn gedefinieerd, maar de meeste eigenschappen zijn niet gedefinieerd. Ook in plaats van een eenvoudige variabele, is de objectverklaring nu ingepakt in een functie en dat is omdat het nog niet echt een object is. Het is gewoon een prototype van een object dat beschrijft hoe het object gemaakt moet worden zonder het te creëren.

Dus nu om objecten te maken op basis van het prototype, kunnen we dit doen:

Dit is hetzelfde als dit doen:

Omdat we een prototype hebben gemaakt, hoefden we het niet op de tweede manier te doen, en het was veel eenvoudiger om verschillende soorten buitenaardse wezens met verschillende snelheden, het aantal armen, wapens en startposities te verklaren.

Wat nu?

Dit artikel was een inleiding tot Object Oriented JavaScript, dat hopelijk het onderwerp demystificeerde en maakte dat het minder intimiderend leek. We hebben alle basisbeginselen behandeld, waaronder het maken van eenvoudige objecten, het toevoegen, verwijderen en wijzigen van eigenschappen, het declareren en gebruiken van methoden en het gebruik van prototyping om objecten gemakkelijker te hergebruiken. Maar er is nog veel meer te leren, dus nu je een goed startpunt hebt, kun je met zelfvertrouwen elke tutorial of les over meer geavanceerde OOP benaderen.

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.