Javascript a oggetti

Siamo abituati a pensare a Javascript come a un linguaggio di scripting semplice che non supporta la programmazione a oggetti.

In effetti questo è sbagliato; JS si è evoluto molto ultimamente, tanto più che HTML5 ne fa ampio uso.

Ed inoltre molti framework supportano già da tempo la OOP.

Basti pensare a Sencha touch ad esempio.

E' probabile che noi nelle nostre pagine web non ne faremo mai uso diretto, ma solo attraverso plugin o script già fatti che magari andremo a modificare.

Ma è comunque una cosa importante.

Quindi oggi facciamo una piccola introduzione agli oggetti in JS.

Creiamo una semplice classe User per contenere le info dell'utente:

 function User(nome, cognome, email) {

  this.nome = nome;

  this.cognome = cognome;

  this.email = email;

 

  this.getUser = function() {

   document.write("Nome: " + this.nome + "<br/>");

   document.write("Cognome: " + this.cognome + "<br/>");

   document.write("Email: " + this.email + "<br/>");

  }

 }

Questa classe ha tre parametri: nome, cognome e email.

E ha la "classica" funzione get per rappresentare i dati.

A questo punto vediamo come creare un oggetto User:

user = new User("Franco", "Franchi", "ff@email.com"); // OGGETTO CON VALORI

user = new User(); // OGGETTO VUOTO E RIEMPITO DOPO

user.nome = "Franco";

user.cognome = "Franchi";

user.email = "ff@email.com";

Le due forme sono praticamente equivalenti: in un caso impostiamo subito i valori, nell'altro lo facciamo dopo.

In seguito vorremmo accedere ai valori dell'oggetto creato:

user.getUser(); // STAMPA I VALORI

Nome: Franco

Cognome: Franchi

Email: ff@email.com

Ovviamente possiamo usare i valori come vogliamo.

Possiamo controllarne il valore e a seconda di quello che esce fare un'azione piuttosto che un'altra.

Tipo il login....

Un argomento un pò più avanzato riguarda la parola chiave prototype.

Questa parola chiave può farci risparmiare un pò di memoria.

La nostra classe User contiene 3 proprietà e un metodo, e quindi se abbiamo 1000 istanze di questa classe ci ritroveremo, ad esempio, con 1000 funzioni getUser() in memoria.

Con prototype possiamo riferirci sempre a una singola istanza piuttosto che copiare l'oggetto ogni volta che ne creiamo uno.

E' più complicato da spiegare che da pensare.

Vediamo come cambia la nostra classe:

function User(nome, cognome, email) {

  this.nome = nome;

  this.cognome = cognome;

  this.email = email;

 

  User.prototype.getUser = function() {

   document.write("Nome: " + this.nome + "<br/>");

   document.write("Cognome: " + this.cognome + "<br/>");

   document.write("Email: " + this.email + "<br/>");

  }

}

E' cambiato solo il metodo getUser().

Così facendo ci riferiremo sempre a una singola istanza della funzione getUser() e questo fa risparmiare memoria.

Questo è possibile perchè tutte le funzioni hanno la proprietà prototype, che serve appunto per non replicare proprietà e funzioni in un oggetto.

Piuttosto i loro valori vengono passati per riferimento (qui si entra un pò nel complicato).

Detto ciò dire che è abbastanza e in più aggiungo una considerazione personale.

Ho fatto l'esempio di un oggetto User che rappresenta un utente.

E' ovvio che la gestione degli utenti, login, permessi, ecc....deve essere fatta lato server, e non tramite JS.

Soprattutto per una questione di sicurezza.

Potete prendere questo come esempio, oppure se magari vi serve gestire qualche info di queste in qualche cookie (anche se pure i cookie sarebbe meglio gestirli lato server).