Evento e scope del this

**Raccoon29** · 03-06-2009, 12:52

Salve a tutti,

vorrei chiedervi cortesemente di provare il seguente codice:

codice:

<html>
   <head>
      <title>This e gli eventi</title>
   </head>
   <body>
      <script type="text/javascript">
         function oggetto1()
         {
            this.DEBUG=new Number(0);
			
            this.controlla=function(){
               alert("controlla: "+this.DEBUG);
            };

            this.daEvento=function(ev){
               alert("evento: "+this.DEBUG);
            };
         }

         var OGGETTO=new oggetto1();
         document.onkeyup=OGGETTO.daEvento;
      </script>
      <form><input type="button" value="Controlla" onClick="OGGETTO.controlla()" /></form>
      <div>Premere un tasto della tastiera per controllare il valore di DEBUG</div>
   </body>
</html>

Creo un oggetto di una "classe" basilare. Se accedo esplicitamente alla sua variabile ottengo il valore e ok, mentre se ci accedo passando per l'evento, non è definita.
Domanda:
ma con
document.evento=OGGETTO.funzione;
non dico al js di chiamare la funzione nello scope dell'oggetto OGGETTO quando viene lanciato l'evento?
L'evento dove mi manda? E il this nella funzione dall'evento a chi punta?

Grazie per la cortese attenzione, a voi la parola; mi raccomando uno alla volta eh

EDIT: anche se sia il link e sia l'evento lo fate puntare alla stessa funzione dà lo stesso problema

**Raccoon29** · 03-06-2009, 14:46

Ho capito qual è il problema: l'evento chiama effettivamente la funzione della classe, solo che la referenza a this non punta alla classe oggetto1, ma a document. Quindi l'unico modo per raggirare il problema è quello di far riferimento esplicitamente all'istanza esterna della classe, nel metodo dell'evento.

codice:

this.daEvento(ev){
   alert(OGGETTO.DEBUG); //this = document, che giustamente non ha DEBUG dichiarato
};

io ho raggirato così, ma se qualcuno conosce un metodo più raffinato sono tutto orecchi.

HTH
ciauz

**fcaldera** · 03-06-2009, 14:55

codice:

function oggetto1() {
     this.DEBUG = 0;

     this.controlla=function(){
          alert("controlla: "+this.DEBUG);
     };

     this.daEvento=function(ev){
          alert("evento: "+this.DEBUG);
     };
}

var OGGETTO=new oggetto1();
document.onkeyup = function() { OGGETTO.daEvento() };

**Raccoon29** · 04-06-2009, 09:40

Sì, così funziona, grazie!

Se posso permettermi: la spiegazione per tutto ciò?
Eppoi domanda OT: che ci fa un moderatore CSS tra i Javascript??

**fcaldera** · 04-06-2009, 10:14

Originariamente inviato da Raccoon29
Sì, così funziona, grazie!

Se posso permettermi: la spiegazione per tutto ciò?
Eppoi domanda OT: che ci fa un moderatore CSS tra i Javascript??

Tralasciando il new number(0) che non influisce in alcun modo (è solo una modifica di buon senso, che motivo hai di istanziare un oggetto per un numero?) l'assegnazione che avevi dato all'evento keyup era tale che, all'interno del tuo oggetto, il "this" perdeva il riferimento a sè stesso e diventava l'oggetto HTMLdocument (che non possiede il metodo 'daEvento')

per rendertene conto ti basta aggiungere un alert(this); in quel metodo e vedere cosa stampa usando le due diverse assegnazioni a document.onkeyup

Volendo mantenere l'assegnazione originaria puoi anche cambiare la proprietà DEBUG da pubblica a privata/privilegiata

codice:

         function oggetto1()
         {
            //this.DEBUG = 0;
            var _DEBUG=new Number(0);

            this.controlla=function(){
               alert("controlla: "+ _DEBUG);
            };

            this.daEvento=function(ev){
               alert("evento: "+ _DEBUG);
            };
         }

Con il vantaggio di non poter cambiare mai la variabile debug se non tramite apposito metodo privilegiato.

Per la seconda domanda: credo (spero) di poter essere utile in entrambi gli argomenti.

**Raccoon29** · 04-06-2009, 11:24

Ah ecco perché...

ok, grazie mille, ora il tutto mi ha un senso compiuto!

Per la seconda domanda: credo (spero) di poter essere utile in entrambi gli argomenti.

...ma sì, lo penso anch'io dai.

**Raccoon29** · 04-06-2009, 12:40

(Scusate il doppio post, ma è un po' come se cambiassi domanda, e scusate se insisto ma mi piace spulciare ogni casistica dei problemi

)
fcaldera ho capito ciò che hai esposto, tuttavia il caso che sto per mostrare sembra del tutto analogo, ma non riesco a tirarne fuori le gambe...
Prego testare il codice:

codice:

<html>
   <head>
      <title>This e gli eventi (un altro caso)</title>
   </head>
   <body>
      <script type="text/javascript">
         function oggetto1()
         {
             this.funzione;

             this.controllami=function(obj){
                this.funzione=obj;
             };

             this.daEvento=function(ev){
                this.funzione(ev);
             };

         }

         OGGETTO1=new oggetto1();
         document.onkeyup=function(ev){ OGGETTO1.daEvento(ev); };

         function oggetto2()
         {
             this.DEBUG=0;

             this.init=function(){
                OGGETTO1.controllami(this.controlla);
             };

             this.controlla=function(ev){
                alert(this.DEBUG);
             };
         }

         var OGGETTO2=new oggetto2();
         OGGETTO2.init();

      </script>
      <form><input type="button" value="Controlla" onClick="OGGETTO2.controlla()" /></form>
      <div>Premere un tasto della tastiera per controllare il valore di DEBUG</div>
   </body>
</html>

DEBUG è sempre il problema, ma stavolta si trova in un'altro oggetto, oggetto che viene a sua volta chiamato da un altro oggetto lanciato dall'evento.
In realtà lo stesso problema si ha se si chiama OGGETTO1.funzione(), però non volevo stravolgere troppo la logica.
E' ormai appurato che è un problema di scope e di riferimento del this: ho fatto numerose prove, anche seguendo la logica maturata finora ma non riesco a trovare una versione funzionante... anche qui idee sul come risolvere?
Vi testo! Vi testo!

**dottwatson** · 04-06-2009, 13:05

penso questa pillola ti potrà essere di mooooolto aiuto per capire realmente gli scope del this e la gestione delle classi

http://forum.html.it/forum/showthrea...readid=1014613

p.s.:

data la consistenza della pillola, è necessario assumerla con moooolta acqua

**Raccoon29** · 04-06-2009, 18:29

Sono riuscito a capire che rendendo la variabile DEBUG privata tutto funziona alla grande... solo che mi domando a chi cavolo stesse puntando this allora...a window?
La gestione delle referenze è un po' bizzarra rispetto alle mie abitudini

Comunque grazie a tutti per le dritte!

Discussione: Evento e scope del this

Strumenti discussione

Ricerca discussione

Visualizza

Evento e scope del this

this è document

Perfetto

Re: Perfetto

ah ecco

Scusate se insito... :$

sì ma... perché?

Permessi di invio