Inleiding tot objekgeoriënteerde JavaScript

Om die een of ander rede is daar 'n neiging in die IT-industrie om van mening te wees dat as u nie OOP-metodes (Object Oriented Programming) gebruik nie, u geen 'regte programmeerder' is nie. Dit is eintlik 'n ietwat dom houding om in te neem, want daar is baie situasies waar OOP nie die mees geskikte manier is om 'n probleem te hanteer nie. Dit is die fout in tale soos Java wat OOP in elke programmeringstaak dwing, of u dit nou nodig het of nie.

JavaScript (wat amper niks met Java te doen het nie) is 'n heel ander taal. Dit bied bykans onbeperkte vryheid en veelsydigheid, met verminderde kompleksiteit op die meeste gebiede. Ongelukkig is daar 'n paar dinge wat meer ingewikkeld is in JavaScript as gevolg van die vryheid wat u probeer gee.

Waarom OOP nie altyd geskik is vir elke taak nie, is dat dit meer ingewikkeld is in 'n program en dikwels ekstra stappe, meer werk en meer dinge behels wat potensieel verkeerd kan gaan as u nie aandag gee nie. Maar OOP kan ook baie voordele bied as dit gebruik word in situasies waar dit gepas is.

Die belangrikste voordeel wat OOP ons kan bied, is replikasie, wat beteken dat ons 'n voorwerp kan kloon en dit herhaaldelik in dieselfde program kan gebruik, wanneer ons dit nodig het. Die geïmpliseerde ingewikkeldheid, en die feit dat JavaScript nie van die begin af gebou is om 'n OOP-taal te wees nie (en dus meer ingewikkeldheid toevoeg), is een van die redes waarom OOP die finale grens vir baie nuwe JavaScript-programmeerders verteenwoordig voordat hulle hul vleuels verdien.

OK, dit is moeilik, maar dit is nie so moeilik nie

Voordat u begin dink dat die konsep Objekgeoriënteerde JavaScript te veel vir u is, moet u in ag neem dat u reeds OOP gebruik, selfs al is u nie daarvan bewus nie. Puriste stem dalk nie saam nie, maar ek vind dit billik om te sê dat as u al HTML en CSS gebruik, en soms JavaScript gebruik het om HTML-elemente op 'n webblad te manipuleer, u alreeds 'n ervare OOP-programmeerder is.

Elke HTML-element op 'n webblad is eintlik 'n objek. Hulle pas almal in die hiërargie van die Document Object Model (DOM), wat beteken dat hulle 'n gedefinieerde klas, gedefinieerde eienskappe en gedefinieerde oorerwing het. Tensy u 'n eiendomswaarde eksplisiet stel, sal alle objekte hul standaardeiendomswaardes gebruik. As u 'n CSS-instruksie skryf, gebruik u 'n metode om een ​​of meer eienskappe van 'n klas te verander.

Elke keer as u 'n HTML-instruksie skryf, skep u 'n nuwe instansie van 'n klas. En soos u seker al sou weet, kan u u eie klasse skep op grond van die vooraf gedefinieerde klas van elke objeksoort (byvoorbeeld, u kan wat heel verskillende eienskappe kan hê van die oorspronklike klas waaruit dit geskep is). U kan spesifiseer dat H2-voorwerpe in hierdie klas 'n ander kleur en grootte het as die gewone H2-voorwerpe. En u kan die gewysigde voorwerpe so gereeld as wat u wil, hergebruik. Die oorspronklike H2-voorwerp is 'n voorwerpsjabloon en u nuwe klas is afgelei van die sjabloonklas.

So ja, OOP is nie maklik nie, maar jy doen dit waarskynlik al, so waarvoor is jy bang?

Die volgende vlak: die skep van u eie voorwerpe

Om met ingeboude DOM-voorwerpe te werk, is te maklik. U het meer uitdagings nodig. Die maak van u eie voorwerpe is die eerste stap na 'n hoër vlak van OOP.

Met al die aanhef, kan u waarskynlik verwag dat die skep van 'n voorwerp 'n groot saak is wat baie ingewikkelde kode verg. Sekerlik, as u al ooit probeer om aangepaste objekklasse in 'n taal soos Java of C # te skep, sal u verwag om 'n lang klaskonstruktor te skep. So doen ons dit in JavaScript:

Wel, dit was anti-klimaat, of hoe? Wat ons daar gedoen het, is dat ons 'n leë voorwerp van die klas 'myObject' geskep het. Dit is duidelik dat leë voorwerpe vervelig is omdat hulle niks doen nie, behalwe dat hulle ruimte in die geheue inneem. Om nuttig te wees, moet 'n voorwerp inhoud bevat. Kom ons kyk na 'n meer praktiese klas:

Bogenoemde toon 'n objek genaamd objAlien wat al hierdie verskillende eienskappe (gewone veranderlikes) en metodes (funksie) daarin het. Tegnies kan u 'n voorwerp ook as 'n verskeidenheid veranderlikes en / of funksies beskou.

Gebruik van voorwerpe in 'n program

Nadat 'n voorwerp gedefinieer is, kan u dit in u programme verwys. In 'n speletjie het u verskeie vreemdelinge, maar skryf kode vir elkeen individubbele vreemdeling sou die program te omslagtig maak. 'N Beter manier is om 'n skikking te skep om al die vreemdelinge op te slaan, en gebruik dan die buitenaardse klas om nuwe vreemdelinge te skep. Byvoorbeeld:

Hierdie kode sou 20 slymerige groen vreemdelinge maak wat hulle 110 pixels van mekaar plaas (dus kan ons raai dat die beeld wat gebruik word om die vreemdeling te stoor 100 px breed is, en daar is 'n marge van 10 pk tussen elke vreemdeling). Uiteraard is dit natuurlik nie 'n goeie manier om 'n speletjie in JavaScript te implementeer nie, want daar is beter tegnieke, maar hierdie artikel handel nie oor die maak van speletjies nie, dit gaan oor die skep en gebruik van voorwerpe.

Voorwerpe hoef nie altyd bygevoeg te word deur die nuwe sleutelwoord te gebruik nie. Hier is 'n voorbeeld van die kode van 'n projek waar 'n voorwerp sy eie eienskappe stel met behulp van die waardes van 'n ander voorwerp:

 

Hier is 'n baie ingewikkelde manier om 'n voorwerp te gebruik, waar die waardes van die voorwerp oorgedra word na die attr-eienskap van die R-objek. As u vertroud is met JSON (JavaScript Object Notation), kan u dink dat die eerste deel van die voorbeeld JSON met sintaksfoute gebruik, maar dit is in werklikheid nie die JSON-kode nie.

Die rede waarom die veranderlike name, behalwe vul, aangehaal word, is om te voorkom dat JavaScript die minus-operateur in die veranderlike name (wat CSS-eienskappe is) verwerk. Sedert die program geskryf is, is veranderinge aangebring om CSS-eienskappe soos font-family as fontFamily te laat skryf, maar hierdie nalatenskapskode is nie aangepas om die verandering te benut nie.

Waarom gebruik voorwerpe?

Voorwerpe is die beste vir situasies waar u veelvuldige gevalle van iets moet maak, of waar u 'n eenvoudige manier benodig om gegewens te groepeer wat verband hou met iets van 'n spesifieke soort. In die spelvoorbeeld hierbo, kan ons sien dat dit moontlik was om veelvuldige kopieë van die objAlien-objek te skep, maar ons kon ook die eienskappe van die voorwerp manipuleer nadat ons dit bygevoeg het, wat in die geval van die voorbeeld die x-eienskap was.

Wanneer moet u nie voorwerpe gebruik nie?

U moet nie voorwerpe gebruik as u dit nie regtig nodig het nie. Dit is nutteloos om u programme te kompliseer sonder 'n goeie rede. As u program ontwerp is om iets eenvoudig te doen, hoef OOP-tegnieke nie nodig te wees nie.

Waarom JavaScript-voorwerpe makliker is om te skep as voorwerpe in ander OOP-tale

In tale soos Java en selfs Visual Basic is die skep van voorwerpe 'n groot taak. Dit is omdat u 'n klassjabloon moet skep (of 'n bestaande een moet gebruik) waarop u voorwerp kan baseer voordat u dit kan definieer. Dit is nie nodig in JavaScript nie omdat ons 'n eenvoudige konstruksietegniek kry (objectname = {…}). Voorwerpe in JavaScript kan ook enige tipe veranderlike insluit, insluitend skikkings, en tipe verklarings bestaan ​​nie. Opbrengswaardes is opsioneel.

Of dit 'n goeie of 'n slegte ding is, is 'n debat, maar JavaScript-programme sal ook nie misluk as u probeer om 'n eiendomswaarde op te roep wat nie bestaan ​​nie. Byvoorbeeld, as u tik:

U sou heel tereg verwag dat bogenoemde kode 5 in die element met ID "par1" sal plaas. Maar as u iets sou tik soos:

U sal nie die vreemdeling se gunsteling geur sien nie, u sal sien dat ongedefinieerd in par1 verskyn. Vir die meeste toepassings sou dit nie 'n probleem wees nie, maar vir sommige is dit die geval. In sulke gevalle moet u daarop voorbereid wees en 'n kode skryf wat geldige waardes toets voordat u daarop vertrou.

Een manier om hiervoor te toets is:

Die antwoord is effens ekstreem, maar jy kry die idee. Let op dat ons toets vir “! ==” en nie “! =” Nie, wat maklik is om deurmekaar te raak. Hier is nog 'n manier om dit te doen:

Dieselfde ding, op 'n ander manier. U kan ook eienskappe by voorwerpe voeg nadat u dit gemaak het. U kan dit so doen:

Dit is duidelik dat u ook die waardes van die eiendomme op dieselfde manier kan verander. Om die gunstelingSmaak-eienskap van die voorwerp te verwyder, moet ons dit doen:

Daar is baie min situasies waar dit ooit nodig sou wees.

Om voorwerpe meer herbruikbaar te maak

U het waarskynlik die grootste potensiële probleem opgemerk met die skep van voorwerpe, naamlik dat as u verskillende soorte vreemdelinge wil hê, u die objAlien.type-eiendom 'n skikking moet maak. Maar daar is 'n ander manier, wat beter is.

Hierdie tegniek word prototipering van voorwerpe genoem, wat beteken dat u 'n basiese sjabloon vir die voorwerp maak, maar nie al die besonderhede invul nie. Ook hier kom ons nader aan die regte manier om voorwerpe tot 'n speletjie toe te voeg.

U kan nou sien dat die metodes van die voorwerp gedefinieër is, maar die meeste eienskappe word nie gedefinieër nie. In plaas daarvan om 'n eenvoudige veranderlike te wees, word die objekverklaring nou in 'n funksie toegedraai, en dit is omdat dit nog nie eintlik 'n voorwerp is nie. Dit is slegs 'n prototipe van 'n voorwerp wat beskryf hoe om die voorwerp te skep sonder om dit eintlik te skep.

Om nou voorwerpe te skep wat op die prototipe gebaseer is, kan ons dit doen:

Dit is dieselfde as om dit te doen:

Omdat ons 'n prototipe gemaak het, hoef ons dit nie op die tweede manier te doen nie, en dit is baie makliker om verskillende soorte vreemdelinge met verskillende snelhede, aantal wapens, wapens en beginposisies te verklaar.

Wat volgende?

Hierdie artikel was 'n inleiding tot objekgeoriënteerde JavaScript, wat die onderwerp hopelik gedemystifiseer het en dit minder intimiderend laat lyk. Ons het al die basiese aspekte bespreek, insluitend hoe om eenvoudige voorwerpe te skep, hoe om eienskappe toe te voeg, te verwyder en te verander, hoe om metodes te verklaar en te gebruik, en hoe om prototipering te gebruik om voorwerpe makliker te hergebruik. Daar is nog baie meer om te leer, so nou dat u 'n goeie beginpunt het, sal u met selfvertroue enige tutoriaal of les oor meer gevorderde OOP kan benader.

Bogdan Rancea

Bogdan is 'n stigterslid van Inspired Mag, en het bykans 6 jaar ervaring in hierdie periode opgedoen. In sy vrye tyd studeer hy graag klassieke musiek en verken visuele kuns. Hy is ook behep met fixies. Hy besit al 5.