Introduzione al JavaScript orientato agli oggetti

Per qualche motivo c'è una tendenza nel settore IT a considerare che se non si utilizzano i metodi di programmazione orientata agli oggetti (OOP), allora non si è un "vero programmatore". Questa è in realtà una presa di posizione un po 'sciocca, perché ci sono molte situazioni in cui OOP non è il modo più appropriato per affrontare un problema. Questo è il difetto in linguaggi come Java che impongono l'OOP in ogni attività di programmazione, sia che ne abbiate bisogno o meno.

JavaScript (che non ha quasi nulla a che fare con Java) è un linguaggio piuttosto diverso. Offre libertà e versatilità quasi illimitate, con una complessità ridotta nella maggior parte delle aree. Sfortunatamente ci sono alcune cose che sono più complicate in JavaScript a causa della libertà che cerca di darti.

Perché OOP non è sempre adatto per ogni attività è che aggiunge più complessità a un programma e spesso comporta passaggi aggiuntivi, più lavoro e più cose che possono potenzialmente andare storte se non si presta attenzione. Ma OOP può anche fornire molti vantaggi se viene utilizzato in situazioni in cui è appropriato.

Il vantaggio più importante che OOP può offrirci è la replica, il che significa che possiamo clonare un oggetto e riutilizzarlo più volte nello stesso programma, ogni volta che ne abbiamo bisogno. La complessità implicita e il fatto che JavaScript non sia stato costruito dall'inizio come linguaggio OOP (aggiungendo così più complessità), è uno dei motivi per cui OOP rappresenta l'ultima frontiera per molti programmatori JavaScript principianti prima che guadagnino le loro ali.

OK, è difficile, ma non è così difficile

Prima di iniziare a pensare che il concetto di JavaScript orientato agli oggetti sia troppo per te, considera che stai già utilizzando OOP anche se non ne sei a conoscenza. I puristi potrebbero non essere d'accordo, ma penso che sia giusto dire che se stai già usando HTML e CSS e di tanto in tanto hai usato JavaScript per manipolare elementi HTML su una pagina web, allora sei già un esperto programmatore OOP.

Ogni elemento HTML su una pagina Web è in realtà un oggetto. Si adattano tutti alla gerarchia DOM (Document Object Model), il che significa che hanno una classe definita, proprietà definite e ereditarietà definita. A meno che non si imposti esplicitamente un valore di proprietà, tutti gli oggetti utilizzeranno i loro valori di proprietà predefiniti. Quando scrivi un'istruzione CSS, ciò che sta realmente accadendo è che stai usando un metodo per modificare uno o più valori di proprietà di una classe.

Ogni volta che scrivi un'istruzione HTML, crei una nuova istanza di una classe. E come certamente saprai, puoi creare le tue classi basate sulla classe predefinita di ogni tipo di oggetto (ad esempio, puoi creare <h2 class = "sottotitoli"> che potrebbe avere proprietà molto diverse dalla classe originale è stato creato da). È possibile specificare che gli oggetti H2 con questa classe avranno un colore e una dimensione diversi dai normali oggetti H2. E puoi riutilizzare quegli oggetti modificati tutte le volte che vuoi. L'oggetto H2 originale è un modello di oggetto e la nuova classe è derivata dalla classe template.

Quindi sì, l'OOP non è facile, ma probabilmente lo stai già facendo, quindi cosa c'è da temere?

Il livello successivo: creare i tuoi oggetti

Lavorare con oggetti DOM integrati è troppo facile. Hai bisogno di più sfide. Creare i propri oggetti è il primo passo verso un livello superiore di OOP.

Con tutto questo preambolo, probabilmente ti stai aspettando che creare un oggetto sia un grosso problema che richiede un sacco di codice complesso. Sicuramente se hai mai provato a creare classi di oggetti personalizzate in una lingua come Java o C #, ti aspetteresti di creare un costruttore di classi lungo. Ecco come lo facciamo in JavaScript:

Beh, era anti-climatico, eh? Quello che abbiamo fatto è stato creare un oggetto vuoto di classe "myObject". Ovviamente gli oggetti vuoti sono noiosi, perché non fanno nulla se non occupare spazio nella memoria. Per essere utile, un oggetto deve avere contenuti. Consideriamo una lezione più pratica:

Quanto sopra mostra un oggetto chiamato objAlien che ha tutte queste diverse proprietà (variabili ordinarie) e metodi (funzione) definiti al suo interno. Tecnicamente, quindi, si potrebbe anche considerare un oggetto come una matrice di variabili e / o funzioni.

Usare oggetti in un programma

Una volta che un oggetto è stato definito, puoi farne riferimento nei tuoi programmi. In un gioco, avresti più alieni, ma scrivere codice per ogni singolo alieno renderebbe il programma troppo ingombrante. Un modo migliore è quello di creare una matrice per memorizzare tutti gli alieni e quindi utilizzare la classe aliena per creare nuovi alieni. Per esempio:

Questo codice renderebbe 20 viscidi alieni verdi mettendoli a distanza di pixel 110 (quindi possiamo indovinare da ciò che l'immagine utilizzata per memorizzare l'alieno è 100px e c'è un margine 10px tra ogni alieno). Ovviamente, ovviamente, questo non è un buon modo per implementare un gioco in JavaScript perché ci sono tecniche migliori, ma questo articolo non riguarda la creazione di giochi, ma la creazione e l'uso di oggetti.

Gli oggetti non devono sempre essere aggiunti usando la nuova parola chiave. Ecco un esempio di codice da un progetto in cui un oggetto imposta le sue proprietà utilizzando i valori di un altro oggetto:

Qui possiamo vedere un modo molto complesso di usare un oggetto, dove i valori dell'oggetto vengono passati alla proprietà attr dell'oggetto R. Se hai familiarità con JSON (JavaScript Object Notation), potresti pensare che la prima parte dell'esempio sta usando JSON con errori di sintassi, ma in realtà non è un codice JSON.

Il motivo per cui i nomi delle variabili, eccetto il riempimento, sono citati è per impedire a JavaScript di elaborare l'operatore meno nei nomi delle variabili (che sono proprietà CSS). Dato che quel programma è stato scritto, sono state apportate delle modifiche per consentire alle proprietà CSS come la famiglia di caratteri di essere scritte come fontFamily, ma questo codice legacy non è stato adattato per sfruttare questa modifica.

Perché usare gli oggetti?

Gli oggetti sono i migliori per le situazioni in cui è necessario creare più istanze di qualcosa o dove è necessario un modo semplice per raggruppare i dati relativi a qualcosa di un particolare tipo. Nell'esempio di gioco sopra, possiamo vedere che era possibile creare più copie dell'oggetto objAlien, ma potevamo anche manipolare le proprietà dell'oggetto dopo averlo aggiunto, che nel caso dell'esempio era la proprietà x.

Quando non usare gli oggetti?

Non dovresti usare oggetti se progetti non ne hanno davvero bisogno. È inutile complicare eccessivamente i tuoi programmi senza una buona ragione. Se il tuo programma è progettato per fare qualcosa di semplice, le tecniche OOP non dovrebbero essere richieste.

Perché gli oggetti JavaScript sono più facili da creare rispetto agli oggetti in altre lingue OOP

In linguaggi come Java e anche Visual Basic, la creazione di oggetti è un compito importante. Questo perché è necessario creare un modello di classe (o utilizzarne uno esistente) per basare l'oggetto prima di poterlo definire. Questo non è necessario in JavaScript perché ci viene data una tecnica di costruzione semplice (objectname = {...}). Gli oggetti in JavaScript possono anche includere qualsiasi tipo di variabile, inclusi gli array, e le dichiarazioni di tipo sono inesistenti. I valori di ritorno sono opzionali.

Che si tratti di una cosa buona o cattiva è questione di dibattito, ma anche i programmi JavaScript non falliranno se si tenta di richiamare un valore di proprietà che non esiste. Ad esempio, se hai digitato:

Si dovrebbe giustamente aspettarsi che la suddetta riga di codice inserisca 5 all'interno dell'elemento con ID "par1". Ma se dovessi digitare qualcosa come:

Non vedresti il ​​sapore preferito dello straniero, vedresti apparire indefinito in par1. Per la maggior parte delle applicazioni questo non sarebbe un problema, ma per alcuni sarebbe. In questi casi, è necessario essere preparati a questo e scrivere il codice che verifica i valori validi prima di fare affidamento su di essi.

Un modo per testare questo è:

Questa risposta è un po 'estrema, ma tu hai l'idea. Si noti che stiamo testando "! ==" e non "! =", Che è una cosa facile da confondersi. Ecco un altro modo per farlo:

Stessa cosa, modo diverso. È inoltre possibile aggiungere proprietà agli oggetti dopo averli creati. Puoi farlo in questo modo:

Ovviamente è anche possibile modificare i valori delle proprietà allo stesso modo. Per rimuovere la proprietà favoriteFlavor dall'oggetto, dovremmo eseguire questa operazione:

Ci sono pochissime situazioni in cui ciò sarebbe mai necessario.

Rendere gli oggetti più riutilizzabili

Probabilmente hai notato il più grande potenziale problema con la creazione di oggetti, che è che se vuoi avere diversi tipi di alieni, devi rendere la proprietà objAlien.type una matrice. Ma c'è un altro modo, che è meglio.

Questa tecnica è chiamata prototipazione degli oggetti, il che significa che si crea un modello base per l'oggetto ma non si riempiono tutti i dettagli. Anche qui ci stiamo avvicinando al modo reale di aggiungere oggetti a un gioco.

Potete vedere ora i metodi dell'oggetto sono definiti, ma la maggior parte delle proprietà non sono definite. Inoltre, invece di essere una variabile semplice, la dichiarazione dell'oggetto è ora racchiusa all'interno di una funzione, e questo perché non è ancora un oggetto. È solo un prototipo di un oggetto, che descrive come creare l'oggetto senza effettivamente crearlo.

Quindi ora per creare effettivamente oggetti basati sul prototipo potremmo fare questo:

Questo è lo stesso di fare questo:

Poiché abbiamo creato un prototipo, non abbiamo avuto bisogno di farlo nel secondo modo e dichiarare diversi tipi di alieni con diverse velocità, numero di armi, armi e posizioni di partenza è molto più semplice.

Cosa accadrà?

Questo articolo era un'introduzione al JavaScript orientato agli oggetti, che si sperava demistificasse l'argomento e lo faceva sembrare meno intimidatorio. Abbiamo coperto tutte le nozioni di base, tra cui come creare oggetti semplici, come aggiungere, rimuovere e modificare le proprietà, come dichiarare e utilizzare i metodi e come utilizzare la prototipazione per rendere gli oggetti più facili da riutilizzare. Ma c'è ancora molto da imparare, quindi ora che hai un buon punto di partenza, sarai in grado di avvicinarti a qualsiasi tutorial o lezione su OOP più avanzato con sicurezza.

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.