Fino a questo momento il concetto di scope sembra tutt'altro che difficile, anzi spesso risulta comodissimo per fare riferimento ad un oggetto senza dover ricorrere ai parametri da passare ad una funzione.
Esiste però una situazione molto frequente in cui lo scope crea non pochi problemi allo sviluppatore inesperto. Essa riguarda l'assegnazione di un metodo di un particolare oggetto ad un evento. Vediamo subito un esempio:
<script type="text/javascript">
var persona = {
nome: "Alberto",
cognome: "Bottarini",
stampaNomeCognome: function() {
alert(this.nome + "n" + this.cognome)
}
}
window.onload = function() {
document.getElementsByTagName("button")[0].onclick = persona.stampaNomeCognome;
}
</script>
<button>Bottone 1</button>In questo esempio ci aspettiamo un comportamento speculare a quello visto in precedenza, invece non è cosi. Questo perché nel momento dell'esecuzione del metodo stampaNomeCognome() lo scope non è piu l'oggetto persona (dal quale possiamo ottenere il nome e il cognome), bensì l'oggetto button che non ha né nome né cognome. L'esecuzione dello script in questo caso stamperà due undefined.
Un problema del tutto simile è riscontrabile facendo un frequente uso di setTimeout() o setInterval(), funzioni per posticipare o ripetere nel tempo una determinata funzione o metodo.
Non disperiamo più del necessario però: esiste una soluzione per risolvere questo scomodo problema. La vedremo nella prossima lezione.