[Resolvido] Problema com Javascript Orientado a Objetos e Eventos

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 ?

>
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.

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 ?

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.

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

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');