[PILLOLA] JavaScript Object Oriented

[andr3a]

C'è chi dice non sia utile, c'è chi dice non sia argomento semplice tanto quanto java o C# ... di fatto sviluppare JS in questo modo ne comporta i soliti vantaggi della programmazione ad oggetti, soprattutto oggi che JS sta prendendo sempre più piede, attraverso una semplicità nota ed intrinseca, tipica del JavaScript stesso.
Questa pillola non è pensata per chi è a digiuno di JavaScript, bensì per chi ne conosce potenzialità e sintassi ma non l'ha ancora approfondito con gli oggetti.

Cosa si intende per classe
Una classe è una porzione di codice portabile e riutilizzabile in grado di effettuare una o più operazioni attraverso metodi (funzioni interne pubbliche o private) o di restituire informazioni attraverso i parametri (variabili interne pubbliche o private).

Una classe in JavaScript è una funzione ?
Si, è possibile affermarlo, ma non è altrettanto possibile farlo nei confronti dell'oggetto che ne istanzia una. Se una classe è di fatto un instanceof Function, un'istanza della classe non è un instanza di funzione ma esattamente un'istanza del nome di quella funzione, ovvero un'istanza di quella classe, o per comodità un oggetto "Classe".

function Test(){};			// funzione Test
var test = new Test();			// oggetto Test
					// Test è istanziato come classe [grazie a new]

alert(Test instanceof Function);	// true
alert(test instanceof Function);	// false
alert(test instanceof Test);		// true

Una funzione può quindi essere usata sia come classe che come funzione ?

// funzione Test
function Test(){

	// assegnazione di un parametro interno pubblico
	this.parametro = "Ciao Mondo";
	
	// operazione di funzione
	alert(this.parametro);
};

// chiamata a funzione Test
Test();				// Ciao Mondo

// istanza di un nuovo oggetto Test
var test = new Test();		// Ciao Mondo

La differenza fondamentale tra l'utilizzo della funzione Test come tale o come classe, è che nel secondo caso possiamo sfruttare in un secondo momento il parametro interno.

// richiamo il parametro della funzione
alert(Test.parametro);		// undefined

// richiamo il parametro dell'oggetto di tipo Test
alert(test.parametro);		// Ciao Mondo

Questo accade perchè il riferimento all'interno della classe Test, ovvero il valore this, perde il referente di se stesso non appena la funzione cessa la sua esecuzione e nel caso di una chiamata diretta, Test.parametro, questo valore di fatto è come se non esistesse, visto che la funzione Test non è stata richiamata e visto che this.parametro è solo una parte di codice presente all'interno di questa funzione.

alert(new Test().parametro); 	// Ciao Mondo
alert(Test().parametro); 	// Errore: Test has no properties

Per questo è necessario istanziare un oggetto attraverso l'uso di Test come classe e non come funzione (sempre grazie a new), per permettere al codice interno alla classe di risalire a se stesso in qualunque momento, perlomeno finchè l'oggetto istanziato ha una validità all'interno del proprio scope.

Scope ? ... e perchè non Rubamezzetto ?
Lo scope è lo spazio in cui una variabile, una funzione o in generale un oggetto, risulta essere raggiungibile o utilizzabile. Lo scope è indispensabile per capire gli oggetti JavaScript ed il JavaScript stesso. Una volta capito alla perfezione come procedere per avere o non avere un determinato scope per ogni metodo, funzione, variabile o oggetto che sia, la strada sarà tutta in discesa.

// funzione Test
function Test(){

	// parametro interno pubblico
	this.parametro = "Ciao Mondo";
	
	// parametro interno privato
	var parametro = "Ciao Mondo Parallelo";
	
	// operazione di funzione
	alert(parametro);
};

// istanza di un nuovo oggetto Test
var test = new Test();		// Ciao Mondo Parallelo
alert(test.parametro);		// Ciao Mondo

La variabile parametro all'interno di Test non cessa comunque di esistere dopo l'assegnazione ad oggetto, poichè il suo scope persiste all'interno di quella porzione di codice.

// funzione Test
function Test(){

	// parametro privato
	var parametro = "Ciao Mondo Parallelo";
	
	// parametro pubblico
	this.parametro = "Ciao Mondo";
	
	// metodo pubblico
	this.leggiParametro = function() {
		alert(parametro);
	};
};

var test = new Test();		// ... non accade niente ...
test.leggiParametro();		// Ciao Mondo Parallelo
alert(test.parametro);		// Ciao Mondo
test.leggiParametro();		// Ciao Mondo Parallelo

Ma la parola var prima del nome della variabile è indispensabile ?
La parola var è una delle migliore amiche di JavaScript ed è quella che definisce esattamente lo scope di una variabile.

var parametro = "Variabile Globale";	// una variabile globale non ha bisogno della parola var 
					// ma non è nemmeno sbagliato usare la parola var per dichiarare una globale
function Test(){

	// parametro privato senza var
	parametro = "Ciao Mondo Parallelo";

	this.leggiParametro = function() {
		alert(parametro);
	};
};

alert(parametro);		// Variabile Globale
var test = new Test();
test.leggiParametro();		// Ciao Mondo Parallelo
alert(parametro);		// Ciao Mondo Parallelo

Dichiarando invece la variabile di funzione con var non si rischia di sovrascrivere una globale ne di ritrovarsi sovrascritta la variabile di funzione.

function Test(){
	// parametro privato senza var
	parametro = "Ciao Mondo Parallelo";
	this.leggiParametro = function() {
		alert(parametro);
	};
};

var test = new Test();
test.leggiParametro();		// Ciao Mondo Parallelo

var parametro = "Variabile Globale";

test.leggiParametro();		// Variabile Globale

Con var possiamo quindi stare sempre tranquilli

function Test(){
	var parametro = "Ciao Mondo Parallelo";
	this.leggiParametro = function() {alert(parametro);};
};
var parametro = "Variabile Globale";
var test = new Test();
test.leggiParametro();		// Ciao Mondo Parallelo
alert(parametro);		// Variabile Globale
test.leggiParametro();		// Ciao Mondo Parallelo

Ma se ho una variabile privata non posso risalire a quella globale ?
Una variabile globale è come se fosse un parametro della super classe window, è quindi sempre possibile raggiungere il suo valore anche usando omonimi all'interno di una classe.

function Test(){
	var parametro = "Ciao Mondo Parallelo";
	this.leggiParametro = function() {alert(parametro);};
	this.leggiParametroGlobale = function() {alert(window.parametro);};
};
var parametro = "Variabile Globale";
var test = new Test();
test.leggiParametroGlobale();	// Variabile Globale		
test.leggiParametro();		// Ciao Mondo Parallelo

Perchè usare variabili private e non globali all'interno di una classe ?
Non c'è un motivo assoluto per scegliere di usare una variabile privata piuttosto che una globale se non quello di essere certi che il valore della variabile o del valore resttuito dalla funzione privata sarà esattamente quello che ci aspettiamo all'interno dell'oggetto e che nessuno potrà quindi modificarlo. Uno dei limiti più consistenti della programmazione ad oggetti in JavaScript è infatti proprio quello di non poter garantire consistenza agli oggetti.
Per consistenza si intende la possibilità di impedire ad altri di modificare metodi o parametri pubblici dei nostri oggetti.

function Test(){
	this.metodoPubblico = function() {
		alert("Ciao Mondo");
	};
};
var test = new Test();
test.metodoPubblico();		// Ciao Mondo

// un altra porzione di codice fa, "per sbaglio", questa operazione
test.metodoPubblico = "Ciao Mondo";	// operazione sempre lecita per un oggetto

// il metodo pubblico dell'oggetto test è stato distruto
test.metodoPubblico();		// Error: test.metodoPubblico is not a function

Qualora un metodo od una variabile dovessero essere utili solo per poter utilizzare altri metodi pubblici è consigliabile sfruttare funzioni o variabili interne, quindi private, al fine di limitare la possibilità ad altri di modificare porzioni indispensabili di codice.

Ma perchè continui a dire "altri" ? Sono io che scrivo le classi ed il codice ... !!!
Le considerazioni da fare sono almeno un paio

• in applicativi dove il codice è veramente tanto e le classi create da centinaia di linee può capitare di "dimenticarsi" di un nome di metodo o parametro già usati per altri scopi, limitare l'utilizzo di nomi al fine di avere pubblici solo quelli fondamentali per l'oggetto può essere di aiuto
• JavaScript si include nelle pagine con una facilità impressionante, Google, come la super mega libreria "Cinema Effects with only 200Kb", potrebbero in qualche modo cambiare il vostro codice e viceversa, senza usare i giusti accorgimenti potreste voi stessi distruggere il codice di altre librerie presenti che avete incluso nella pagina

Ok per le variabili, qualcosa sulle funzioni / metodi privati ?
Assegnare un parametro o un metodo pubblico è molto semplice, basta usare this davanti al nome del metodo o parametro. Allo stesso tempo all'interno di un metodo pubblico il this sarà riferito all'oggetto stesso.

function Test(){
	this.confronta = function(variabile) {
		alert(this === variabile);
	};
};
var test = new Test();
test.confronta(test);	// true
test.confronta(Test);	// false

Questo permette al metodo pubblico di risalire ad altri metodi pubblici o variabili pubbliche attraverso l'uso del prefisso this, riferendosi sempre all'oggetto stesso.

function Test(){
	this.mostraPippo = function() {
		alert(this.pippo);
	}
};
var test = new Test();
var oggetto = new Test();
oggetto.pippo = "Yuk!";
oggetto.mostraPippo();	// Yuk!
test.mostraPippo();	// undefined

Quanto detto serve per introdurre i metodi privati, o per meglio definirli, le funzioni a scope locale. Queste funzioni possono essere innestate nella classe come nel metodo pubblico e sebbene non abbiano la parola var davanti hanno le stesse identiche regole di scope delle variabili.

function Test(){
	
	// "metodo" privato / funzione privata
	function avviso(){alert("Avviso Generico")};
	
	this.avviso = function() {
		avviso();
	};
	
	this.mostraAvviso = function(messaggio) {
		// funzione locale
		function avviso(){alert(messaggio)};
		avviso();
	};
};
var test = new Test();
test.mostraAvviso("Ciao Mondo");	// Ciao Mondo
test.avviso();				// Avviso Generico

In questo "semplice" esempio c'è molto di quanto detto sullo scope, sulle funzioni innestate e sui metodi privati. E' importante notare che la funzione locale al metodo mostraAvviso nonsovrascrive quella privata definita nello scope della classe (la prima), come è importante notare che la funzione innestata al metodo mostraAvviso non ha in questo caso nemmeno bisogno di una variabile come argomento, poichè lo scope della variabile messaggio, inviata al metodo dell'oggetto, ha validità per tutto il metodo stesso ed ogni porzione di codice creata al suo interno potrà sfruttare questa variabile.
Altra nota di rilievo è che in questo caso non è possibile, una volta oscurato lo scope della prima funzione "avviso()", risalire alla stessa, poichè this.avviso, all'interno del metodo, come Test.avviso, sempre all'interno o fuori dall'oggetto, non saranno utilizzabili, proprio grazie al fatto di essere private.

[andr3a]

"Metodi" privati e il referente this, una "simbiosi univoca"
Sanno entrambi di esistere, convivono all'interno dello stesso spazio, ma solo uno è in grado di sfruttare l'altro.
Utilizzare un this all'interno di una funzione privata è infatti quanto di più sbagliato si possa fare durante la scrittura di una classe. Essenso la funzione privata va gestita esattamente come tale, ovvero come una funzione che, non avendo un referente this, non è parte di un oggetto (perlomeno non direttamente associata ad esso) e se richiamata non avrà alcun this da sfruttare, se non quello della super classe window.
Questo è un "hack" particolare, perchè permette ad una classe di risalire direttamente a variabili globali attraverso l'uso di funzioni interne ma può forviare i meno preparati, poichè il this in questione sarà tutto tranne l'oggetto stesso dove tale funzione è stata definita.

function Test(){
	function avviso(){alert(this.oggetto)};
	this.avviso = function() {
		avviso();
	};
};
var oggetto = new Test();
oggetto.avviso();		// [object Object]

In questo esempio il metodo avviso richiama la funzione avviso che mostra in alert l'oggetto stesso grazie al fatto che var oggetto è parte della super classe window.
Niente di più "caotico" ai fini dell'utilizzo di classi o oggetti, sia perchè non è detto che il nome dell'oggetto sia sempre noto come non è detto che sia sempre globale.
Le classi possono infatti essere anche innestate (classi definite dentro altre classi ... classi "private") ed in questo caso è pressapoco impossibile risalire all'oggetto che si sta manipolando.
Per ovviare a questa serie di problematiche, è sufficiente ricordarsi di inviare il referente stesso alle funzioni interne che lo richiedono.

function Test(){
	function avviso(self){
		alert(self.parametro);
	};
	this.avviso = function() {
		avviso(this);
	};
	this.parametro = "Ciao Mondo";
};
var oggetto = new Test();
oggetto.avviso();		// Ciao Mondo

Ho letto tutto, sembra OK ... ma che fine ha fatto prototype ?
Per molti sviluppatori JS prototype è "l'unico modo di scrivere oggetti in JavaScript" o spesso considerato "l'unico modo corretto di scrivere oggetti in JavaScript" ... niente di più discutibile dal mio punto di vista.
L'attributo prototype non è ne l'unico modo di creare oggetti ne il modo corretto, poichè

• estranea il più delle volte porzioni di codice dalla classe di appartenenza
• rende il codice poco leggibile
• viene usato anche quando non ce n'è assoluto bisogno

// classe vista fino ad ora
function Test1() {
	this.parametro = "Test1";
	this.mostraParametro = function() {
		alert(this.parametro);
	};
};

// classe secondo molti ...
function Test2(){};
Test2.prototype.parametro = "Test2";
Test2.prototype.mostraParametro = function(){
	alert(this.parametro);
};

Dal punto di vista della leggibilità sfido chiunque a dire che il metodo prototype sia migliore mentre dal punto di vista puramente pratico con prototype non è possibile utilizzare una funzione interna con scope globale all'interno della classe, cosa secondo me in certi casi estremamente utile, se lo scopo è simulare metodi privati altrimenti inesistenti.

function Test2(){
	function avviso(self){alert(self.parametro)};
};
Test2.prototype.parametro = "Test2";
Test2.prototype.mostraParametro = function(){
	avviso(this);
};

var test2 = new Test2();
test2.mostraParametro(); // avviso is not defined

Non saranno mica tutti deficenti che usano prototype ...
Infatti non lo sono! Uno dei vantaggi principale del metodo prototype è l'assegnazione "in core" del metodo / parametro. Questo significa che mentre un this.funzione deve essere in qualche modo rivalutato ad ogni chiamata dal motore JavaScript del browser, un metodo prototype non costringe tale motore a fare questo passaggio.
In soldoni, il metodo prototype è uno dei metodi consigliati qualora la velocità di esecuzione del codice sia uno degli obiettivi principali ma bisogna anche saper valutare quando questa ottimizzazione sia veramente in grado di permettere al codice di trarne vantaggi.
Una constatazione personale (mia e di altri) sulla questione è che tanto vale, a questo punto, sfruttare questa caratteristica direttamente per tutta la classe, al fine di non dover rivalutare ne l'assegnazione della stessa ne alcuna parte del suo codice.

function Test() {
	function avviso(self){alert(self.parametro)};
	this.parametro = "Test";
	this.mostraParametro = function() {
		avviso(this);
	};
};

// prototype di se stessa
Test.prototype = new Test;

var test = new Test();
test.mostraParametro();

Un'alternativa potrebbe essere, qualora l'inizializzazione della classe dovesse effettuare a sua volta operazioni, dichiarare le prototype direttamente in scrittura classe.

function Test() {
	function avviso(self){alert(self.parametro)};
	
	this.parametro = "Test";
	
	Test.prototype.mostraParametro = function() {
		avviso(this);
	};
};
var test = new Test();
test.mostraParametro();

Nota di rilievo è l'utilizzo di Test, al posto di this, in assegnazione metodo ed a sua volta l'utilizzo voluto di this, invece che Test.prototype, per l'assegnazione del parametro.
Questo punto è fondamentale per capire l'uso di prototype, spiegato ora.

Ma cosa fa di preciso prototype ?
prototype specifica al motore JavaScript del browser che "quella" determinata classe deve avere quel metodo o quel parametro. Per "quella" non si intende quella sola, ma tutte le variabili che ne derivano.

function Test() {
	Test.prototype.saluta = function() {
		alert(this.saluto);
	};
};

// istanzio 2 oggetti classe Test
var test = new Test();
var altroTest = new Test();

// imposto il parametro saluto per ogni oggetto
test.saluto = "Ciao";
altroTest.saluto = "Mondo";

// sfrutto il metodo
test.saluta();		// Ciao
altroTest.saluta();	// Mondo

// ridefinisco la prototype della classe Test
Test.prototype.saluta = function() {
	alert("Prototype");
};

// tento di risfruttare il metodo
test.saluta();		// Prototype

Va anche detto che avendo scelto di sfruttare il metodo prototype in assegnazione classe, il metodo saluta verrebbe comunque ridefinito in modo corretto.

// .... codice sopra ... ed in fine
Test();
test.saluta();		// Ciao

Abbastanza intrecciata come situazione ... e sapete quale è l'unico modo per non vedersi derubati del proprio metodo per ogni oggetto istanziato o per la classe stessa ? Non usare prototype !!!

function Test() {
	this.saluta = function() {
		alert(this.saluto);
	};
};

// istanzio 2 oggetti classe Test
var test = new Test();
var altroTest = new Test();

// imposto il parametro saluto per ogni oggetto
test.saluto = "Ciao";
altroTest.saluto = "Mondo";

// sfrutto il metodo
test.saluta();		// Ciao
altroTest.saluta();	// Mondo

// ridefinisco la prototype della classe Test
Test.prototype.saluta = function() {
	alert("Prototype");
};

// tento di risfruttare il metodo
test.saluta();		// Ciao
altroTest.saluta();	// Mondo

Ebbene il super metodo prototype non prevale sul referente this poichè sebbene di fatto venga assegnato alla classe Test un metodo diverso da quello definito al suo interno senza prototype, le variabili derivate, come detto all'inizio di questa pillola, non sono la funzione Test, ma sono oggetti istanziati da una classe e non sfruttano più quindi un metodo di funzione esteso attraverso l'uso di prototype ma sfruttano semplicemente un metodo assegnato a loro stessi, un pò come aver fatto questo:

var oggetto = {
	saluta:function() {alert("Ciao");}
};

oggetto.saluta();	// Ciao

oggetto.prototype.saluta = function(){
	alert("Prototype");
};	// Errore: oggetto.prototype has no properties

Tutto ciò è per far capire che nel caso del this.metodo = function(){} ... per riassegnare o sovrascrivere tale metodo a tutti gli oggetti deriivati da quella classe è necessario ricercarli tutti e riassegnare il metodo "a mano" per ognuno di questi e questo può essere sia un pro a favore dell'integrità che un contro a causa della difficoltà maggiore qualora sia veramente necessario ad un certo punto del codice cambiare uno o più metodi ad una serie di oggetti derivati da una o più classi (ma a questo punto è più facile che il codice abbia qualcosa che non va a livello di concetto base ...).

Ma prototype serve solo ad assegnare metodi ?
No, serve anche ad altro.
prototype serve ad estendere classi native

var test = "Mondo";

// per estendere tutte le stringhe
String.prototype.saluta = function() {
	alert("Ciao");
};

test.saluta();	// Ciao


// per estendere tutti gli oggetti e derivati, quindi stringhe comprese
Object.prototype.hello = function() {
	alert("Hello");
};


test.hello();	// Hello
[].hello();	// Hello
(1).hello();	// Hello
(true).hello();	// Hello

e serve quindi anche ad estendere classi JavaScript.

function Test() {
	this.saluta = function() {
		alert("Ciao");
	};
	this.salutaTest = function() {
		alert("Ciao Test");
	};
};
function SubTest() {
	this.saluta = function() {
		alert("Ciao SubTest");
	};
};
SubTest.prototype = new Test;

var subtest = new SubTest();

subtest.saluta();	// Ciao SubTest
subtest.salutaTest();	// Ciao Test

Per concludere
Una cosa è certa, JavaScript non ha linearità concettuale paragonabile a Java, C# o altri linguaggi, ma tutto sommato ne ha comunque una ben definita. Tutto sta fare tests, capire al meglio cosa prevale su cosa, scope globale, locale, referenti e probabilmente anche altro, qui ho solo tentato di dare una piccola delucidazione sulla questione, spero di aver fatto cosa gradita.
Vi lascio meditare su quest'ultimo pezzo di codice

function Test() {
	this.saluta = function() {
		alert("Ciao");
	};
	this.salutaTest = function() {
		alert("Ciao Test");
	};
	this.getNested = function(saluto) {
		function getNested(message){alert(message)};
		this.salutoInCostruzione = saluto;
		this.saluta = function() {
			getNested(this.salutoInCostruzione);
		};
	};
	this.salutaDallaSub = function() {
		this.saluta();				// Ciao SubTest
	};
};
function SubTest() {
	this.saluta = function() {
		alert("Ciao SubTest");
	};
	this.salutaSuperNested = function() {
		var super = new this.constructor();
		super.saluta();				// Ciao
		new super.getNested("Nested").saluta();	// Nested
	};
};
SubTest.prototype = new Test;

var subtest = new SubTest();

subtest.saluta();		// Ciao SubTest
subtest.salutaTest();		// Ciao Test
subtest.salutaSuperNested();	// Ciao, Nested
subtest.salutaDallaSub();	// Ciao SubTest

capito questo, siete a cavallo

[pierofix]

Grazie mille andr3a!

[nicola75ss]

Complimenti andr3a, davvero ben scritta. Ora ho le idee un pò più chiare.

[pietro09]

per andr3a

Mi è stato consigliato di leggere questo articolo dopo una mia domanda su cosa faccia esattamente new, e davvero è un articolo superbo.
Volevo sapere da andr3a se avesse scritto qualcosa di così interessante riguardante il metodo call degli oggetti. Grazie

[andr3a]

appena ho un pò di tempo faccio pillola per apply e call, per ora grazie, ti chiedo solo di pazientare

[andr3a]

Ho scritto questa pillola come se JavaScript fosse Object Oriented solo con le classi.

Dopo aver preso spranghe sui denti nella ML di Python per il mio concetto sintattico / visuale della programmazione ad oggetti (istanza.methodo() o istanza.parametro o new Classe) credo sia doveroso specificare che JavaScript è comunque un linguaggio Object Oriented.

function pippo(){};

sebbene sia un modo apparentemente procedurale di utilizzare JS il core del browser interpreta pippo come metodo della super classe window

window.pippo() infatti richiamerà esattamente quella funzione (o quel suo metodo) come descritto nella parte relativa allo scope di questa pillola.

Essendo tutto sotto window ad eccezzione delle top level functions (eval, encodeURI, escape, encodeURIComponent, alert ... e poco altro) a prescindere che si utilizzi JavaScript con le classi che non lo si utilizzi in questo modo, si sta comunque sviluppando con un linguaggio Object Oriented.

alert((1).toString()) ... ne è l'esempio più semplice, le "primitive" sono già classi e tutti i derivati di window sono già oggetti.


Quest'appunto non è scontato ed è molto importante ... al punto che il titolo di questa stessa pillola potrebbe essere totalmente errato poichè sarebbe più estatto chiamarla:

Utilizzo e gestione delle Classi in JavaScript

perchè come ho già detto JS è sempre e comunque un linguaggio OO.

[smt]

esiste la possibilità di avere variabili statiche in classi javascript?

[pietro09]

mi lancio se per variabili statiche si intende variabili di classe e non di istanza, esistono, sia variabili che metodi statici

function test(){}

test.variabile = "xyz"; //è una variabile di classe


ma attendo conferma

[andr3a]

Originariamente inviato da smt
esiste la possibilità di avere variabili statiche in classi javascript?

in qualche modo puoi emularle ... tipo così

function setStaticVar(__class__, __name__, __value__) {
	__class__.prototype[__name__] = __value__;
}
function getStaticVar(__class__, __name__) {
	return (new __class__())[__name__];
}
	
	

function MyClass(){};
setStaticVar(MyClass, "staticVar", 1);


alert(getStaticVar(MyClass, "staticVar"));	// 1


var test = new MyClass();
test.staticVar++;
alert(test.staticVar);				// 2

alert(getStaticVar(MyClass, "staticVar"));	// 1


setStaticVar(MyClass, "staticVar", getStaticVar(MyClass, "staticVar") + 5);
alert(test.staticVar);				// 2
alert(getStaticVar(MyClass, "staticVar"));	// 6

test = new MyClass();
alert(test.staticVar);		// 6