[Resolvido] Problema com Javascript Orientado a Objetos e Eventos

[Bruno_Quaresma 3]

Galera tenho o seguinte script de exemplo.

 

function botao(id){

 this.id = id;
 this.button = null;
 this.mode = false;

 this.construtor = function(){
   this.button = document.getElementById(this.id);
   this.button.onclick = function(){
     if(this.mode){
       this.desligar(); 
     }else{
       this.ligar();
     }
   }
 }

 this.ligar = function(){
    this.mode = true;  
 }

 this.desligar = function(){
   this.mode = false;
 } 

 this.construtor();

}

 

Após o evento onclick, ele não reconhece mais o this da classe botao e sim do objeto HTML. O this.mode por exemplo não é mais reconhecido, dá undefined. e os eventos ligar e desligar tbm.

 

Ainda não conseguir resolver. Abraços.

[William Bruno 1501]

  this.id = id;
..
   this.button = document.getElementById(this.id);

meio estranha essa construção hein amigo ?

 

se você já tem o id q aponta para o id do objeto, pq pegar ele de novo com o getElement ?

 

como você instancia esse objeto ?

[JCMais 75]

se você já tem o this q aponta para o objeto, pq pegar ele de novo com o getElement ?

 

O this ali no caso não é referente à um elemento. Provavelmente essa função botao, é apenas um helper.

[Bruno_Quaresma 3]

Seria assim

 

botao1 = new botao('id_do_elemento_html');

 

ai na variavel this.button = eu crio uma referência dele em cache pra quando eu for usa-lo. Pra não ter que ficar sempre document.getElementById(this.id).

 

Tu tm alguma ideia de fazer com outra forma ?

[William Bruno 1501]

você chegou a dar uma olhada neste topico?

http://forum.imasters.com.br/topic/457948-javascript-oo/page__view__findpost__p__1812643

 

@Jc eu editei meu post, mania de enviar antes de terminar o texto.

[JCMais 75]

O teu problema é simples. Quando o teu onclick é disparado, o contexto do this muda da tua função, para o elemento html que disparou o evento.

Salva o teu this para uma variavel, e usa ela dentro do onclick. No exemplo que o William passou por exemplo, o JB usa self. Eu geralmente uso me, visto que self é uma palavra reservada em javascript.

 

Se quiser continuar usando this, você pode usar o metódo bind: http://jsfiddle.net/JCMais/m9pnG/

 

Artigo sobre escopo em javascript (em inglês): http://ryanmorr.com/archives/scope-context-in-javascript

[Bruno_Quaresma 3]

Obrigado @JcMais e @William Bruno. O material que vocês mandaram é muito bom. Vou dar uma olhada mais afundo.

 

 

O código funcionando.

 

function botao(id){

           var self = this;
           this.id = id;
           this.button = null;
           this.mode = false;

           this.construtor = function(){
               this.button = document.getElementById(this.id);
               this.button.onclick = function(){
                   if(self.mode){
                       self.desligar();                        
                   }else{                        
                       self.ligar();                        
                   }
               }
           }

           this.ligar = function(){
               this.mode = true;
               alert('Ligar');
           }

           this.desligar = function(){
               this.mode = false;
               alert('Desligar');
           } 

           this.construtor();

       }

       var botao = new botao('btn');