Cerchiamo di fare esercizi sullo scope...
Quando io scrivo un codice del genere:
<script type="text/javascript">
funz=function(){
setInterval(this.funzione(),1000);
}
var oggetto={
funzione: function(){
alert("hu");
},
chiama: function(){
funz.call(this);
}
};
oggetto.chiama();
</script>
<body></body>
la funzione oggetto.chiama mi evoca la funzione funz, che viene portata allo scope dell'oggetto, ossia mediante la call(this) viene fatta rientrare all'interno dell'oggetto e guarda solo ciò che c'è all'interno dell'oggetto... giusto?Vediamo meglio
<script type="text/javascript">
funz =function(){
alert(this);
}
var oggetto={
funzione: function(){
alert("hu");
},
chiama: function(){
funz.call(this);
}
};
oggetto.chiama();
</script>
<body></body>
La funzione oggetto.chiama mi evoca la funzione funz che mi dà come risultato [object Object].Ora faccio chiamare la medesima funzione dal di fuori di un oggetto.
<script type="text/javascript">
funz =function(){
alert(this);
}
var oggetto={
funzione: function(){
alert("hu");
},
chiama: function(){
funz.call(this);
}
};
funz();
</script>
<body></body>
E ottengo [object Window].Se la funzione viene chiamata dall'interno dell'oggetto, essa viene portata all'interno dello scope dell'oggetto, mentre se viene chiamata dal di fuori dell'oggetto mantiene lo scope di window.
Ora la chiamo dal di dentro dell'oggetto senza dare il parametro this alla call:
<script type="text/javascript">
funz =function(){
alert(this);
}
var oggetto={
funzione: function(){
alert("hu");
},
chiama: function(){
funz.call();
}
};
oggetto.chiama();
</script>
<body></body>
ottengo come risultato [object Window].
Ora faccio che la funzione esterna venga chiamata dall'oggetto ed evochi un altro metodo dell' oggetto, con le due modalità di call
<script type="text/javascript">
funz =function(){
this.funzione();
}
var oggetto={
funzione: function(){
alert("hu");
},
chiama: function(){
funz.call(this);
}
};
oggetto.chiama();
</script>
<body></body>
Output: hu: esegue l'altro metodo dell'oggetto.
<script type="text/javascript">
funz =function(){
this.funzione();
}
var oggetto={
funzione: function(){
alert("hu");
},
chiama: function(){
funz.call();
}
};
oggetto.chiama();
</script>
<body></body>
Output: errore: Proprietà o metodo non supportati dall'oggetto, in corrispondenza di this.funzione().Perchè?
Aggiungiamo una riga che mostri il contesto in cui le funzioni agiscono.
Ricominciamo:
<script type="text/javascript">
funz =function(){
alert(this);
this.funzione();
}
var oggetto={
funzione: function(){
alert("hu");
},
chiama: function(){
funz.call(this);
}
};
oggetto.chiama();
</script>
<body></body>
Output: 1) [object Object], 2) hu
Questo significa che il contesto in cui la funzione si trova è quello dell'oggetto.
<script type="text/javascript">
funz =function(){
alert(this);
this.funzione();
}
var oggetto={
funzione: function(){
alert("hu");
},
chiama: function(){
funz.call();
}
};
oggetto.chiama();
</script>
<body></body>
Output: [object Window]... poi più niente. Vado con l'IDE a vedere dove sta l'errore, se ce n'è uno...Bene: in corrispondenza di this.funzione() risulta proprietà o metodo non supportati dall'oggetto.
Con il this la funzione esterna viene portata nello scope dell'oggetto, mentre senza resta nello scope di window.
Nessun commento:
Posta un commento