Introduktion til objektorienteret JavaScript

Af en eller anden grund er der en tendens i IT-branchen til at tage den opfattelse, at hvis du ikke bruger Object Oriented Programming (OOP) -metoder, så er du ikke en “rigtig programmør”. Det er faktisk en noget fjollet holdning at tage, fordi der er mange situationer, hvor OOP ikke er den mest passende måde at håndtere et problem på. Dette er fejlen på sprog som Java, der tvinger OOP til enhver programmeringsopgave, uanset om du har brug for det eller ej.

JavaScript (som næsten ikke har noget med Java at gøre) er et helt andet sprog. Det giver næsten ubegrænset frihed og alsidighed med reduceret kompleksitet på de fleste områder. Desværre er der nogle ting, der er mere kompliceret i JavaScript på grund af den frihed, den prøver at give dig.

Hvorfor OOP ikke altid egner sig til enhver opgave, er at det tilføjer et mere kompleksitet til et program og ofte vil involvere ekstra trin, mere arbejde og flere ting, der potentielt kan gå galt, hvis du ikke er opmærksom. Men OOP kan også give en masse fordele, hvis det bruges i situationer, hvor det er passende.

Den vigtigste fordel, som OOP kan tilbyde os, er replikering, hvilket betyder, at vi kan klone et objekt og genbruge det flere gange i det samme program, når vi har brug for det. Den underforståede kompleksitet, og det faktum, at JavaScript ikke er bygget fra starten til at være et OOP-sprog (således tilføje mere kompleksitet), er en af ​​grundene til, at OOP repræsenterer den endelige grænse for mange nye JavaScript-programmerere, før de tjener deres vinger.

OK, det er svært, men det er ikke så svært

Før du begynder at tænke, at konceptet med objektorienteret JavaScript er for meget for dig, skal du overveje, at du allerede bruger OOP, selvom du ikke er opmærksom på det. Purister er måske uenige, men jeg synes, det er fair at sige, at hvis du allerede bruger HTML og CSS, og du lejlighedsvis har brugt JavaScript til at manipulere HTML-elementer på en webside, så er du allerede en erfaren OOP-programmør.

Hvert HTML-element på en webside er faktisk et objekt. De passer alle ind i Document Object Model (DOM) hierarki, hvilket betyder, at de har en defineret klasse, definerede egenskaber og defineret arv. Medmindre du eksplicit indstiller en egenskabsværdi, bruger alle objekter deres standardegenskabsværdier. Når du skriver en CSS-instruktion, er det, der virkelig sker, at du bruger en metode til at ændre en eller flere egenskabsværdier for en klasse.

Hver gang du skriver en HTML-instruktion, opretter du en ny forekomst af en klasse. Og som du helt sikkert allerede ville vide, kan du oprette dine egne klasser baseret på den foruddefinerede klasse for hver objekttype (for eksempel kan du oprette som kan have meget forskellige egenskaber fra den oprindelige klasse, den blev oprettet fra). Du kan specificere, at H2-objekter med denne klasse vil have en anden farve og størrelse fra de almindelige H2-objekter. Og du kan genbruge de modificerede objekter så ofte du vil. Det originale H2-objekt er en objektskabelon, og din nye klasse stammer fra skabelonklassen.

Så ja, OOP er ikke let, men du gør sandsynligvis allerede det, så hvad er der at være bange for?

Det næste niveau: oprette dine egne objekter

Det er for let at arbejde med indbyggede DOM-objekter. Du har brug for flere udfordringer. At fremstille dine egne objekter er det første skridt til et højere niveau af OOP.

Med al den indledning forventer du sandsynligvis, at det at oprette et objekt er en big deal, der kræver en masse kompleks kode. Bestemt, hvis du nogensinde har prøvet at oprette tilpassede objektklasser på et sprog som Java eller C #, forventer du at oprette en lang klassekonstruktør. Sådan gør vi det i JavaScript:

Nå, det var anti-klimatisk, ikke? Det, vi gjorde der, var, at vi oprettede et tomt objekt i klasse “myObject”. Det er klart, at tomme genstande er kedelige, fordi de ikke gør andet end at tage plads i hukommelsen. For at være nyttigt skal et objekt have indhold. Lad os overveje en mere praktisk klasse:

Ovenstående viser et objekt kaldet objAlien, som har alle disse forskellige egenskaber (almindelige variabler) og metoder (funktion) defineret inden for det. Teknisk set kan du også betragte et objekt som en række variabler og / eller funktioner.

Brug af objekter i et program

Når et objekt er defineret, kan du henvise til det i dine programmer. I et spil ville du have flere aliens, men at skrive kode for hver enkelt udlænding ville gøre programmet for besværligt. En bedre måde er at oprette en matrix til at gemme alle udlændinge og derefter bruge fremmedklassen til at oprette nye udlændinge. For eksempel:

Denne kode ville gøre 20 slimede, grønne udlændinge, der placerer dem 110 pixels fra hinanden (så vi kunne gætte ud fra dette, at billedet, der blev brugt til at gemme udlænding, er 100px bredt, og der er en margin på 10 pixels mellem hver udlænding). Naturligvis er dette naturligvis ikke en god måde at implementere et spil i JavaScript, fordi der er bedre teknikker, men denne artikel handler ikke om at lave spil, det handler om at oprette og bruge objekter.

Objekter behøver ikke altid tilføjes ved hjælp af det nye søgeord. Her er en prøvekode fra et projekt, hvor et objekt indstiller sine egne egenskaber ved hjælp af værdierne for et andet objekt:

 

Her kan vi se en virkelig kompleks måde at bruge et objekt på, hvor objektets værdier overføres til attr egenskaben for R objektet. Hvis du er bekendt med JSON (JavaScript Object Notation), tror du måske, at den første del af eksemplet bruger JSON med syntaksfejl, men faktisk er det ikke JSON-kode.

Årsagen til, at variabelnavne undtagen udfyldning er citeret, er at forhindre JavaScript i at behandle minus-operatøren i variabelnavne (som er CSS-egenskaber). Siden dette program blev skrevet, blev der foretaget ændringer for at gøre det muligt for CSS-egenskaber som font-family at blive skrevet som fontFamily, men denne ældre kode er ikke blevet tilpasset til at drage fordel af denne ændring.

Hvorfor bruge objekter?

Objekter er bedst til situationer, hvor du er nødt til at lave flere tilfælde af noget, eller hvor du har brug for en enkel måde at gruppere data relateret til noget af en bestemt type. I spileksemplet ovenfor kan vi se, at det var muligt at oprette flere kopier af objAlien-objektet, men vi kunne også manipulere egenskaberne for objektet, efter at vi tilføjede det, som i tilfældet med eksemplet var x-egenskaben.

Hvornår skal man ikke bruge objekter?

Du skal ikke bruge objekter, hvis du ikke virkelig har brug for dem. Det er meningsløst at overkomplicere dine programmer uden en god grund. Hvis dit program er designet til at gøre noget enkelt, bør OOP-teknikker ikke kræves.

Hvorfor JavaScript-objekter er lettere at oprette end Objekter på andre OOP-sprog

På sprog som Java og endda Visual Basic er oprettelse af objekter en stor opgave. Dette skyldes, at du skal oprette en klasseskabelon (eller bruge en eksisterende) til at basere dit objekt på, før du kan definere det. Det er ikke nødvendigt i JavaScript, fordi vi får en simpel konstruktionsteknik (objektnavn = {…}). Objekter i JavaScript kan også omfatte alle typer variabler, herunder arrays, og typedeklarationer findes ikke. Returværdier er valgfri.

Om det er en god ting eller en dårlig ting er et spørgsmål om en vis debat, men JavaScript-programmer vil heller ikke mislykkes, hvis du forsøger at hente en ejendomsværdi, der ikke findes. Hvis du f.eks. Skrev:

Du forventer med rette, at ovennævnte kodelinje sætter 5 inde i elementet med ID “par1”. Men hvis du skulle skrive noget som:

Du ville ikke se fremmedens yndlingssmag, du vil se udefineret vises i par1. For de fleste applikationer ville dette ikke være et problem, men for nogle ville det være det. I disse tilfælde skal du være forberedt på det og skrive kode, der tester for gyldige værdier, før du stoler på dem.

En måde at teste på dette er:

Dette svar er lidt ekstremt, men du får ideen. Bemærk, at vi tester for "! ==" og ikke "! =", Hvilket er en let ting at blive forvirret over. Her er en anden måde at gøre det på:

Samme ting, anderledes måde. Du kan også føje egenskaber til objekter, når du har oprettet dem. Du kan gøre det på denne måde:

Det er klart, at du også kan ændre egenskabernes værdier på samme måde. For at fjerne egenskaben favoriteFlavor fra objektet, skal vi gøre dette:

Der er meget få situationer, hvor dette nogensinde ville være nødvendigt.

Gør objekter mere genanvendelige

Du har sandsynligvis bemærket det største potentielle problem med at oprette objekter, som er, at hvis du ville have forskellige typer udlændinge, skulle du gøre egenskaben objAlien.type til en matrix. Men der er en anden måde, som er bedre.

Denne teknik kaldes objektprototyping, hvilket betyder, at du opretter en grundlæggende skabelon til objektet, men ikke udfylder alle detaljerne. Også her kommer vi tættere på den reelle måde at tilføje objekter til et spil.

Du kan nu se, hvordan objektets metoder er defineret, men de fleste af egenskaberne er ikke defineret. I stedet for at være en simpel variabel, er objekterklæringen nu indpakket i en funktion, og det er fordi det faktisk ikke er et objekt endnu. Det er bare en prototype af et objekt, der beskriver, hvordan man opretter objektet uden faktisk at oprette det.

Så nu for faktisk at oprette objekter baseret på prototypen kunne vi gøre dette:

Dette er det samme som at gøre dette:

Fordi vi oprettede en prototype, behøvede vi ikke at gøre det på anden måde, og det er meget lettere at erklære forskellige typer udlændinge med forskellige hastigheder, antal våben, våben og startpositioner.

Hvad er det næste?

Denne artikel var en introduktion til Objektorienteret JavaScript, som forhåbentlig afmystificerede emnet og fik det til at virke mindre skræmmende. Vi dækkede alle de grundlæggende, herunder hvordan man opretter enkle objekter, hvordan man tilføjer, fjerner og ændrer egenskaber, hvordan man erklærer og bruger metoder, og hvordan man bruger prototyper for at gøre objekter lettere at genbruge. Men der er stadig meget mere at lære, så nu når du har et godt udgangspunkt, vil du være i stand til at nærme dig enhver tutorial eller lektion om mere avanceret OOP med selvtillid.

Bogdan Rancea

Bogdan er et grundlæggende medlem af Inspired Mag og har akkumuleret næsten 6 års erfaring i denne periode. På fritiden kan han lide at studere klassisk musik og udforske billedkunst. Han er også ganske besat af fixies. Han ejer allerede 5.