Introduktion till objektorienterad JavaScript

Av någon anledning finns det en tendens i IT-branschen att anta att om du inte använder Object Oriented Programming (OOP) -metoder är du inte en “riktig programmerare”. Det är faktiskt en något dum ställning att inta, för det finns många situationer där OOP inte är det mest lämpliga sättet att hantera ett problem. Detta är bristen på språk som Java som tvingar OOP till varje programmeringsuppgift oavsett om du behöver det eller inte.

JavaScript (som nästan inte har något med Java att göra) är ett helt annat språk. Det ger nästan obegränsad frihet och mångsidighet, med minskad komplexitet på de flesta områden. Tyvärr finns det några saker som är mer komplicerade i JavaScript på grund av den frihet den försöker ge dig.

Varför OOP inte alltid passar för varje uppgift är att det lägger till ett mer komplexitet i ett program och ofta kommer att innebära extra steg, mer arbete och fler saker som potentiellt kan gå fel om du inte uppmärksammar. Men OOP kan också ge många fördelar om det används i situationer där det är lämpligt.

Den viktigaste fördelen som OOP kan erbjuda oss är replikering, vilket innebär att vi kan klona ett objekt och återanvända det flera gånger i samma program, när vi behöver det. Den underförstådda komplexiteten, och det faktum att JavaScript inte från början är ett OOP-språk (och därmed lägger till mer komplexitet), är ett av anledningarna till att OOP representerar den sista gränsen för många nya JavaScript-programmerare innan de tjänar sina vingar.

OK, det är svårt, men det är inte så svårt

Innan du börjar tänka att konceptet med objektorienterad JavaScript är för mycket för dig bör du tänka på att du redan använder OOP även om du inte är medveten om det. Purister kanske inte håller med, men jag tycker att det är rättvist att säga att om du redan använder HTML och CSS, och du ibland har använt JavaScript för att manipulera HTML-element på en webbsida, så är du redan en erfaren OOP-programmerare.

Varje HTML-element på en webbsida är faktiskt ett objekt. De passar alla in i hierarkin för Document Object Model (DOM), vilket innebär att de har en definierad klass, definierade egenskaper och definierad arv. Om du inte uttryckligen anger ett fastighetsvärde, kommer alla objekt att använda sina standardegenskapsvärden. När du skriver en CSS-instruktion är det som verkligen händer att du använder en metod för att ändra en eller flera egenskaper för en klass.

Varje gång du skriver en HTML-instruktion skapar du en ny instans av en klass. Och som du säkert redan vet, kan du skapa dina egna klasser baserat på den fördefinierade klassen för varje objekttyp (till exempel kan du skapa som kan ha mycket olika egenskaper än den ursprungliga klassen den skapades från). Du kan ange att H2-objekt med denna klass kommer att ha en annan färg och storlek än de vanliga H2-objekten. Och du kan återanvända de modifierade objekten så ofta du vill. Det ursprungliga H2-objektet är en objektmall och din nya klass härrör från mallklassen.

Så ja, OOP är inte lätt, men du gör förmodligen redan det, så vad finns det att vara rädd för?

Nästa nivå: skapa dina egna objekt

Att arbeta med inbyggda DOM-objekt är för enkelt. Du behöver fler utmaningar. Att göra dina egna objekt är det första steget till en högre nivå av OOP.

Med allt detta ingress förväntar du dig förmodligen att skapa ett objekt är en stor sak som kräver mycket komplex kod. Visst om du någonsin har försökt skapa anpassade objektklasser på ett språk som Java eller C #, förväntar du dig att skapa en lång klasskonstruktör. Så här gör vi i JavaScript:

Det var antiklimatiskt, va? Vad vi gjorde där var att vi skapade ett tomt objekt av klass “myObject”. Uppenbarligen är tomma föremål tråkiga, för de gör ingenting förutom att de tar plats i minnet. För att vara användbart måste ett objekt ha innehåll. Låt oss överväga en mer praktisk klass:

Ovanstående visar ett objekt som heter objAlien som har alla dessa olika egenskaper (vanliga variabler) och metoder (funktion) definierade i det. Tekniskt sett kan du också betrakta ett objekt som en mängd variabler och / eller funktioner.

Använda objekt i ett program

När ett objekt har definierats kan du referera till det i dina program. I ett spel skulle du ha flera utlänningar, men att skriva kod för varje enskild utlänning skulle göra programmet för klumpigt. Ett bättre sätt är att skapa en matris för att lagra alla utlänningar och sedan använda främmande klassen för att skapa nya utlänningar. Till exempel:

Den här koden skulle göra 20 slemmiga gröna utlänningar som placerar dem 110 pixlar från varandra (så vi kan gissa utifrån detta att bilden som används för att lagra utlänningen är 100px bred och att det finns en marginal på 10 pixlar mellan varje främling) Naturligtvis är detta naturligtvis inte ett bra sätt att implementera ett spel i JavaScript eftersom det finns bättre tekniker, men den här artikeln handlar inte om att skapa spel, det handlar om att skapa och använda objekt.

Objekt behöver inte alltid läggas till med det nya sökordet. Här är ett exempel på kod från ett projekt där ett objekt anger sina egna egenskaper med hjälp av värdena på ett annat objekt:

 

Här kan vi se ett riktigt komplicerat sätt att använda ett objekt, där objektets värden skickas till R-objektets attr-egenskap. Om du känner till JSON (JavaScript Object Notation) kanske du tror att den första delen av exemplet använder JSON med syntaxfel, men det är faktiskt inte JSON-kod.

Anledningen till att variabelnamnen, utom fyllning, är citerade är att förhindra JavaScript från att bearbeta minusoperatören i variabelnamnen (som är CSS-egenskaper) Sedan det programmet skrevs, gjordes ändringar för att tillåta CSS-egenskaper som font-family att skrivas som fontFamily, men denna arvkod har inte anpassats för att dra nytta av den förändringen.

Varför använda objekt?

Objekt är bäst för situationer där du behöver göra flera instanser av något, eller där du behöver ett enkelt sätt att gruppera data relaterade till något av en viss typ. I spelexemplet ovan kan vi se att det var möjligt att skapa flera kopior av objAlien-objektet, men vi kan också manipulera objektets egenskaper efter att vi lagt till det, vilket i fallet med exemplet var x-egenskapen.

När ska man inte använda objekt?

Du bör inte använda objekt om du inte behöver det. Det är meningslöst att komplicera dina program utan någon god anledning. Om ditt program är utformat för att göra något enkelt bör OOP-tekniker inte krävas.

Varför JavaScript-objekt är lättare att skapa än Objekt på andra OOP-språk

På språk som Java och till och med Visual Basic är att skapa objekt en stor uppgift. Detta beror på att du måste skapa en klassmall (eller använda en befintlig) för att basera ditt objekt på innan du kan definiera det. Det är inte nödvändigt i JavaScript eftersom vi får en enkel konstruktionsteknik (objektnamn = {…}). Objekt i JavaScript kan också innehålla alla typer av variabler, inklusive matriser, och typdeklarationer är obefintliga. Returvärden är valfria.

Vare sig det är bra eller dåligt är det en fråga om debatt, men JavaScript-program kommer inte heller att misslyckas om du försöker få fram ett fastighetsvärde som inte finns. Om du till exempel skrev:

Du förväntar dig med rätta att ovanstående kodrad sätter 5 inuti elementet med ID "par1". Men om du skulle skriva något som:

Du skulle inte se främlingens favoritsmak, du skulle se odefinierade visas i par1. För de flesta applikationer skulle detta inte vara ett problem, men för vissa skulle det vara det. I dessa fall måste du vara beredd på det och skriva kod som testar giltiga värden innan du litar på dem.

Ett sätt att testa för detta är:

Det svaret är lite extremt, men du får idén. Lägg märke till att vi testar för "! ==" och inte "! =", Vilket är lätt att bli förvirrad över. Här är ett annat sätt att göra det:

Samma sak, annorlunda sätt. Du kan också lägga till egenskaper till objekt efter att du har skapat dem. Du kan göra det på detta sätt:

Uppenbarligen kan du också ändra egenskaperna för egenskaperna på samma sätt. För att ta bort favoritFlavor-egenskapen från objektet, måste vi göra detta:

Det finns väldigt få situationer där det någonsin skulle vara nödvändigt.

Att göra objekt mer återanvändbara

Du har antagligen märkt det största potentiella problemet med att skapa objekt, vilket är att om du ville ha olika typer av utlänningar, skulle du behöva göra egenskapen objAlien.type till en matris. Men det finns ett annat sätt, som är bättre.

Denna teknik kallas objektprototyp, vilket innebär att du gör en grundmall för objektet men inte fyller i alla detaljer. Även här närmar vi oss det verkliga sättet att lägga till objekt i ett spel.

Du kan nu se objektets metoder definieras, men de flesta av egenskaperna definieras inte. Istället för att vara en enkel variabel är objektdeklarationen nu inslagad i en funktion, och det beror på att det inte är ett objekt ännu. Det är bara en prototyp av ett objekt som beskriver hur man skapar objektet utan att skapa det.

Så nu för att faktiskt skapa objekt baserat på prototypen kan vi göra detta:

Detta är samma sak som att göra detta:

Eftersom vi skapade en prototyp, behövde vi inte göra det på andra sättet, och att förklara olika typer av utlänningar med olika hastigheter, antal vapen, vapen och startpositioner är mycket lättare.

Vad nästa?

Den här artikeln var en introduktion till objektorienterad JavaScript, som förhoppningsvis avmystifierade ämnet och gjorde att det verkade mindre skrämmande. Vi behandlade alla grunderna inklusive hur man skapar enkla objekt, hur man lägger till, tar bort och ändrar egenskaper, hur man deklarerar och använder metoder och hur man använder prototyp för att göra objekt lättare att återanvända. Men det finns fortfarande mycket mer att lära sig, så nu när du har en bra utgångspunkt, kommer du att kunna närma dig alla självstudier eller lektioner om mer avancerad OOP.

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.