Una traduzione di scope potrebbe essere quella di contesto di esecuzione all'interno del quale una particolare funzione JavaScript viene eseguita. Questo è un concetto abbastanza nuovo per chi proviene da qualche altro linguaggio di programmazione: nei linguaggi funzionali non ha senso parlare di contesto di esecuzione in quanto le diverse funzioni risiedono nello stesso grande contenitore globale, mentre nei linguaggi orientati agli oggetti, nonostante esista un ambiente all'interno del quale ciascun metodo viene invocato, esso non può essere in qualche modo gestito in quanto è sempre rappresentato dall'oggetto stesso sul quale il metodo viene chiamato.
In JavaScript qualsiasi funzione ha uno scope che può essere referenziato tramite la keyword this. Questo costrutto interno al linguaggio serve appunto per fare riferimento al macro-oggetto all'interno del quale il metodo viene eseguito. Se una determinata funzione non presenta uno scope preciso, essa verrà invocata all'interno del oggetto globale window, che, come sappiamo, è uno degli oggetti impliciti del motore di interpretazione di JavaScript quando viene eseguito all'interno di un browser e che rappresenta la finestra aperta dall'utente.
Vediamo subito un esempio:
Abbiamo creato due funzioni, una globale e una definita come membro di un oggetto. Nonostante il contenuto della funzione sia lo stesso, l'esito non sarà tale. Infatti funzioneGlobale() viene eseguita all'interno dell'oggetto window mentre funzioneLocale() all'interno del nostro oggetto container. Per questo motivo lo scope tra le due funzioni sarà diverso. Fin qua sembra tutto facile. È tempo di fare un passo avanti.
Una delle tante possibilità offerte da questo aspetto del linguaggio è quello di creare funzioni "intercambiabili" in base allo scope. Approfondiamo con un esempio:
In questo esempio un po' banale è possibile vedere come la stessa funzione può essere in qualche modo condivisa anche da oggetti molto diversi tra loro ma referenziati al suo interno sempre tramite this.
Esistono quattro diversi contesti entro il quale una particolare funzione può essere invocata e quindi esistono quattro differenti comportamenti che possono essere assunti dall'oggetto this. Vediamo i primi due.
In una organizzazione del codice orientata agli oggetti, c'è la spesso la necessità, all'interno di un metodo, di identificare e di riferirsi all'oggetto sul quale il metodo è stato invocato.
Nell'esempio abbiamo creato un oggetto persona con due proprietà principali, nome e cognome. Se dall'interno di un metodo (per esempio il nostro stampaNomeCognome()) vogliamo far riferimento all'oggetto o a qualche sua proprietà utilizziamo this (o this.proprietà).
Sempre in ottica object-oriented, all'interno di un costruttore è possibile fare riferimento all'oggetto, che verrà creato grazie al costrutto new, utilizzando il nostro caro this. Riscriviamo l'esempio di prima in un modo più elegante:
Rispetto all'esempio di prima in questo secondo caso non abbiamo creato una particolare istanza dell'oggetto, ma abbiamo definito la classe persona, utilizzabile infinite volte per infinite istanze, le quali implementeranno tutte il metodo stampaNomeCognome().
Fonte: javascript.html
In JavaScript qualsiasi funzione ha uno scope che può essere referenziato tramite la keyword this. Questo costrutto interno al linguaggio serve appunto per fare riferimento al macro-oggetto all'interno del quale il metodo viene eseguito. Se una determinata funzione non presenta uno scope preciso, essa verrà invocata all'interno del oggetto globale window, che, come sappiamo, è uno degli oggetti impliciti del motore di interpretazione di JavaScript quando viene eseguito all'interno di un browser e che rappresenta la finestra aperta dall'utente.
Vediamo subito un esempio:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Abbiamo creato due funzioni, una globale e una definita come membro di un oggetto. Nonostante il contenuto della funzione sia lo stesso, l'esito non sarà tale. Infatti funzioneGlobale() viene eseguita all'interno dell'oggetto window mentre funzioneLocale() all'interno del nostro oggetto container. Per questo motivo lo scope tra le due funzioni sarà diverso. Fin qua sembra tutto facile. È tempo di fare un passo avanti.
Funzioni intercambiabili in base allo scope
Una delle tante possibilità offerte da questo aspetto del linguaggio è quello di creare funzioni "intercambiabili" in base allo scope. Approfondiamo con un esempio:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
In questo esempio un po' banale è possibile vedere come la stessa funzione può essere in qualche modo condivisa anche da oggetti molto diversi tra loro ma referenziati al suo interno sempre tramite this.
I contesti e l'oggetto ''this'
Esistono quattro diversi contesti entro il quale una particolare funzione può essere invocata e quindi esistono quattro differenti comportamenti che possono essere assunti dall'oggetto this. Vediamo i primi due.
Invocazione di un metodo di un particolare oggetto
In una organizzazione del codice orientata agli oggetti, c'è la spesso la necessità, all'interno di un metodo, di identificare e di riferirsi all'oggetto sul quale il metodo è stato invocato.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nell'esempio abbiamo creato un oggetto persona con due proprietà principali, nome e cognome. Se dall'interno di un metodo (per esempio il nostro stampaNomeCognome()) vogliamo far riferimento all'oggetto o a qualche sua proprietà utilizziamo this (o this.proprietà).
Costruttore
Sempre in ottica object-oriented, all'interno di un costruttore è possibile fare riferimento all'oggetto, che verrà creato grazie al costrutto new, utilizzando il nostro caro this. Riscriviamo l'esempio di prima in un modo più elegante:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Rispetto all'esempio di prima in questo secondo caso non abbiamo creato una particolare istanza dell'oggetto, ma abbiamo definito la classe persona, utilizzabile infinite volte per infinite istanze, le quali implementeranno tutte il metodo stampaNomeCognome().
Fonte: javascript.html