Introduksjon til objektorientert JavaScript

Av en eller annen grunn er det en tendens i IT-bransjen å anta at hvis du ikke bruker Object Oriented Programming (OOP) -metoder, så er du ikke en “ekte programmerer”. Det er faktisk en litt dum holdning å innta, for det er mange situasjoner der OOP ikke er den mest passende måten å håndtere et problem på. Dette er feilen på språk som Java som tvinger OOP inn i hver programmeringsoppgave, enten du trenger det eller ikke.

JavaScript (som nesten ikke har noe med Java å gjøre) er et ganske annet språk. Det gir nesten ubegrenset frihet og allsidighet, med redusert kompleksitet på de fleste områder. Dessverre er det noen ting som er mer komplisert i JavaScript på grunn av friheten det prøver å gi deg.

Hvorfor OOP ikke alltid passer for enhver oppgave, er at det tilfører et program mer kompleksitet og ofte vil innebære ekstra trinn, mer arbeid og flere ting som potensielt kan gå galt hvis du ikke tar hensyn. Men OOP kan også gi mange fordeler hvis det brukes i situasjoner der det er passende.

Den viktigste fordelen OOP kan tilby oss er replikering, noe som betyr at vi kan klone et objekt og bruke det flere ganger i det samme programmet når vi trenger det. Den underforståtte kompleksiteten, og det at JavaScript ikke er bygget fra starten for å være et OOP-språk (og dermed legge til mer kompleksitet), er en av grunnene til at OOP representerer den endelige grensen for mange nye JavaScript-programmerere før de tjener vingene.

OK, det er vanskelig, men det er ikke så vanskelig

Før du begynner å tenke at konseptet med objektorientert JavaScript er for mye for deg, bør du tenke på at du allerede bruker OOP selv om du ikke er klar over det. Purister er kanskje uenige, men jeg synes det er rettferdig å si at hvis du allerede bruker HTML og CSS, og du av og til har brukt JavaScript for å manipulere HTML-elementer på en webside, så er du allerede en erfaren OOP-programmerer.

Hvert HTML-element på en webside er faktisk et objekt. De passer alle inn i Document Object Model (DOM) hierarki, noe som betyr at de har en definert klasse, definerte egenskaper og definert arv. Med mindre du eksplisitt angir en eiendomsverdi, vil alle objekter bruke standardegenskapens verdier. Når du skriver en CSS-instruksjon, er det du virkelig bruker, en metode for å endre en eller flere egenskaper for en klasse.

Hver gang du skriver en HTML-instruksjon, oppretter du en ny forekomst av en klasse. Og som du sikkert allerede ville vite, kan du lage dine egne klasser basert på den forhåndsdefinerte klassen for hver objekttype (for eksempel kan du opprette som kan ha veldig forskjellige egenskaper fra den opprinnelige klassen den ble opprettet fra). Du kan spesifisere at H2-objekter med denne klassen vil ha en annen farge og størrelse fra de vanlige H2-objektene. Og du kan bruke de modifiserte objektene på nytt så ofte du vil. Det opprinnelige H2-objektet er en objektmal, og den nye klassen din kommer fra malklassen.

Så ja, OOP er ikke lett, men du gjør det sannsynligvis allerede, så hva er det å være redd for?

Neste nivå: lage dine egne objekter

Det er for enkelt å jobbe med innebygde DOM-objekter. Du trenger flere utfordringer. Å lage dine egne objekter er det første trinnet til et høyere nivå av OOP.

Med alt det ingressen, forventer du sannsynligvis at det å lage et objekt er mye å kreve mye kompleks kode. Hvis du noen gang har prøvd å lage egendefinerte objektklasser på et språk som Java eller C #, forventer du å lage en lang klassekonstruktør. Slik gjør vi det i JavaScript:

Vel, det var antiklimatisk, ikke sant? Det vi gjorde der var at vi opprettet et tomt objekt i klassen “myObject”. Åpenbart er tomme gjenstander kjedelige, fordi de ikke gjør noe annet enn å ta plass i minnet. For å være nyttig, må et objekt ha innhold. La oss vurdere en mer praktisk klasse:

Ovennevnte viser et objekt kalt objAlien som har alle disse forskjellige egenskapene (vanlige variabler) og metoder (funksjon) definert i seg. Teknisk sett kan du også betrakte et objekt som et utvalg av variabler og / eller funksjoner.

Bruke objekter i et program

Når et objekt er definert, kan du referere det til i programmene dine. I et spill vil du ha flere romvesener, men å skrive kode for hver enkelt romvesen ville gjøre programmet for tungvint. En bedre måte er å lage en matrise for å lagre alle romvesenene, og deretter bruke fremmedklassen til å lage nye romvesener. For eksempel:

Denne koden vil gjøre 20 slimete grønne romvesener som plasserer dem 110 piksler fra hverandre (så vi kan gjette fra dette at bildet som ble brukt til å lagre romvesenet er 100px bredt, og at det er en margin på 10 piksler mellom hver romvesen). Selvfølgelig er dette selvfølgelig ikke en god måte å implementere et spill i JavaScript fordi det er bedre teknikker, men denne artikkelen handler ikke om å lage spill, det handler om å lage og bruke objekter.

Objekter trenger ikke alltid legges til ved hjelp av det nye søkeordet. Her er et utvalg av kode fra et prosjekt der et objekt setter sine egne egenskaper ved å bruke verdiene til et annet objekt:

 

Her kan vi se en veldig kompleks måte å bruke et objekt på, der objektets verdier føres til attr-egenskapen til R-objektet. Hvis du er kjent med JSON (JavaScript Object Notation), kan du tro at den første delen av eksemplet bruker JSON med syntaksfeil, men faktisk er det ikke JSON-kode.

Årsaken til at variabelnavnene, unntatt fyll, er sitert, er å forhindre JavaScript i å behandle minus-operatøren i variabelnavnene (som er CSS-egenskaper). Siden det programmet ble skrevet, ble det gjort endringer for å la CSS-egenskaper som font-family bli skrevet som fontFamily, men denne arven koden har ikke blitt tilpasset for å dra nytte av den endringen.

Hvorfor bruke gjenstander?

Objekter er best for situasjoner der du trenger å lage flere forekomster av noe, eller hvor du trenger en enkel måte å gruppere data relatert til noe av en bestemt type. I spilleksemplet over kan vi se at det var mulig å lage flere kopier av objAlien-objektet, men vi kan også manipulere egenskapene til objektet etter at vi la det til, som i tilfelle eksemplet var x-egenskapen.

Når ikke skal du bruke objekter?

Du bør ikke bruke objekter hvis du ikke virkelig trenger dem. Det er meningsløst å komplisere programmene dine uten god grunn. Hvis programmet ditt er designet for å gjøre noe enkelt, bør ikke OOP-teknikker kreves.

Hvorfor JavaScript-objekter er enklere å lage enn Objekter på andre OOP-språk

På språk som Java og til og med Visual Basic er det en stor oppgave å lage objekter. Dette er fordi du må lage en klassemal (eller bruke en eksisterende) for å basere objektet ditt på før du kan definere det. Det er ikke nødvendig i JavaScript fordi vi får en enkel konstruksjonsteknikk (objektnavn = {…}). Objekter i JavaScript kan også inkludere alle typer variabler, inkludert matriser, og typedeklarasjoner er ikke-eksisterende. Returverdier er valgfrie.

Enten det er en god ting eller en dårlig ting er et spørsmål om noen debatt, men JavaScript-programmer vil heller ikke mislykkes hvis du prøver å hente frem en eiendomsverdi som ikke eksisterer. Hvis du for eksempel skrev:

Du forventer med rette at ovennevnte kodelinje setter 5 inne i elementet med ID "par1". Men hvis du skulle skrive noe sånt som:

Du vil ikke se fremmedens favorittsmak, du vil se udefinert vises i par1. For de fleste applikasjoner vil dette ikke være et problem, men for noen vil det være det. I disse tilfellene må du være forberedt på det og skrive kode som tester for gyldige verdier før du stoler på dem.

En måte å teste på dette er:

Det svaret er litt ekstremt, men du skjønner. Legg merke til at vi tester for "! ==" og ikke "! =", Som er en enkel ting å bli forvirret om. Her er en annen måte å gjøre det på:

Samme ting, annerledes måte. Du kan også legge til egenskaper til objekter etter å ha opprettet dem. Du kan gjøre det på denne måten:

Det er klart at du også kan endre verdiene til egenskapene på samme måte. For å fjerne favoritt-smak-egenskapen fra objektet, må vi gjøre dette:

Det er svært få situasjoner der dette noen gang vil være nødvendig.

Gjøre gjenstander mer gjenbrukbare

Du har sannsynligvis lagt merke til det største potensielle problemet med å lage objekter, som er at hvis du ønsket å ha forskjellige typer romvesener, må du gjøre objAlien.type-egenskapen til en matrise. Men det er en annen måte, som er bedre.

Denne teknikken kalles objektprototyping, som betyr at du lager en grunnleggende mal for objektet, men ikke fyller ut alle detaljene. Også her kommer vi nærmere den virkelige måten å legge objekter til et spill.

Du kan se nå metodene til objektet er definert, men de fleste av egenskapene er ikke definert. I stedet for å være en enkel variabel, er objektdeklarasjonen nå pakket inn i en funksjon, og det er fordi den faktisk ikke er et objekt ennå. Det er bare en prototype av et objekt, som beskriver hvordan du lager objektet uten å opprette det.

Så nå for å faktisk lage objekter basert på prototypen, kunne vi gjøre dette:

Dette er det samme som å gjøre dette:

Fordi vi opprettet en prototype, trengte vi ikke å gjøre det andre veien, og det er mye enklere å erklære forskjellige romvesener med forskjellige hastigheter, antall våpen, våpen og startposisjoner.

Hva nå?

Denne artikkelen var en introduksjon til Object Oriented JavaScript, som forhåpentligvis avmystifiserte emnet og fikk det til å virke mindre skremmende. Vi dekket alle det grunnleggende, inkludert hvordan lage enkle objekter, hvordan du legger til, fjerner og endrer egenskaper, hvordan deklarerer og bruker metoder og hvordan du bruker prototyping for å gjøre objekter enklere å gjenbruke. Men det er fortsatt mye mer å lære, så nå som du har et godt utgangspunkt, vil du være i stand til å nærme deg hvilken som helst tutorial eller leksjon om mer avansert OOP med selvtillit.

Bogdan Rancea

Bogdan er et grunnleggende medlem av Inspired Mag, etter å ha opparbeidet seg nesten 6 års erfaring i løpet av denne perioden. På fritiden liker han å studere klassisk musikk og utforske billedkunst. Han er ganske besatt av fixies også. Han eier 5 allerede.