Scope in Javascript

In javascript le funzioni scritte in un certo ambito (scope), possono essere passate o chiamate in un ambito diverso: di conseguenza, la parola-chiave this assume un significato diverso a seconda dello scope.
Una prima regola è: se una funzione non ha un suo scope, allora il suo scope sarà l’ oggetto globale window

Esempio:

<script type="text/javascript">

var funzioneGlobale = function() {
  alert(this); // oggetto implicito window
}

var container = {
  funzioneLocale: function() {
    alert(this); //oggetto container
  }
}

funzioneGlobale();
container.funzioneLocale();

</script>

Come detto prima, this assume un significato diverso a seconda dello scope: vediamo come una funzione, chiamata in 2 oggetti diversi, si comporta in maniera diversa

<script type="text/javascript">
var stampaNome = function() {
  alert(this.nome || "Non ho nessun nome");
}

var persona = {
  nome: "Alberto",
  stampaNome: stampaNome
}

var animale = {
  razza: "Pastore tedesco",
  stampaNome: stampaNome
}

persona.stampaNome(); //"persona" ha la proprietà "nome"
animale.stampaNome(); //"nome" non è definito in "animale"
</script>

Vediamo allora i diversi possibili scope:

Metodo di un oggetto

Quando una funzione è interna ad un oggetto, this si riferisce all’ oggetto stesso:

<script type="text/javascript">
var auto = {
  marca: "Mercedes",
  modello: "SLK",
 
  stampaMarcaModello: function() {
    alert(this.marca + "\n" + this.modello)
  }
}
 
auto.stampaMarcaModello();
</script> 

Costruttore

Nel costruttore di una classe, this si riferisce all’ oggetto che sarà istanziato con new:

<script type="text/javascript">
 
var persona = function(nome, cognome) {
  this.nome = nome;
  this.cognome = cognome;
   
  this.stampaNomeCognome = function() {
    alert(this.nome + "\n" + this.cognome)
  }
}
 
var a = new persona("Mario", "Bianchi");
a.stampaNomeCognome();
</script>

Funzioni callback

Se una funzione di callback viene assegnata in maniera programmatica in uno script (ad es. element.onclick = funzione;) allora lo scope è l’ oggetto a cui viene assegnata.
Quando invece una funzione viene assegnata nell’ HTML (ad es. onclick=”funzione()”) allora lo scope è window:

<script type="text/javascript">
 
function controllaScope() {
  alert(this.tagName || "Niente tagName, sono window");
}
 
window.onload = function() {
  document.getElementsByTagName("button")[1].onclick = controllaScope;
  document.getElementsByTagName("a")[1].onclick = controllaScope;
}
 
</script>
 
 
<button onclick="controllaScope()">Bottone 1</button>
<button>Bottone 2</button>
 
<a href="#" onclick="controllaScope()">Link 1</a>
<a href="#">Link 2</a>

ATTENZIONE!! abbiamo visto che, in un metodo, this si riferisce all’ oggetto, ma se assegniamo tale metodo ad una funzione di callback in maniera programmatica, il contesto diventa l’ elemento HTML che genera l’ evento, quindi this si riferisce ad esso !!

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...