5

Estou com uma dificuldade (que provavelmente é bem boba) em armazenar um valor em uma propriedade de um objeto em Javascript. Já fiz algo parecido recentemente utilizando this.propriedade = valor dentro da função "construtora" e não tive problemas em reutilizar o valor em uma função definida como `Objeto.prototype.nome_funcão".

Porém, nesse exemplo (disponível no JSFiddle) uma propriedade (this.m_oClickCallback) não é visível na função de tratamento do clique do mouse (MyButton.prototype.handleClick), gerando a seguinte exceção quando o botão é clicado:

Uncaught TypeError: Object [object global] has no method 'm_oClickCallback'

Eu imagino que provavelmente o erro se deve a algo bem bobo, mas não estou conseguindo enxergar o que é.

Aqui está o html do exemplo que eu preparei:

<body onload="init();">
    <canvas id="myCanvas" width="800" height="600">
        O seu navegador não suporta HTML5. (<i>Your browser does not support HTML5.</i>)
    </canvas>
</body>

E o código Javascript:

(function() {

    // Objeto de botão customizado
    var MyButton = function(sLabel, sColor, oClickCallback) {
        // Chama o initialize do objeto protótipo (createjs.Container)
        this.initialize();

        // Armazena a referência para o callback do evento de click
        this.m_oClickCallback = oClickCallback;

        // Cria o conteúdo do botão
        var oText = new createjs.Text(sLabel, "40px Arial", "#ffffff");
        oText.textBaseline = "top";
        oText.textAlign = "center";

        var iWidth = oText.getMeasuredWidth() + 30;
        var iHeight = oText.getMeasuredHeight() + 20;

        var oBackground = new createjs.Shape();
        oBackground.name = "Background";
        oBackground.graphics.beginFill(sColor).drawRoundRect(0, 0, iWidth, iHeight, 10);

        oText.x = iWidth / 2;
        oText.y = 10;

        this.addChild(oBackground, oText);

        // Captura o evento de click        
        this.addEventListener("click", this.handleClick);
    }  

    // Define o protótipo
    MyButton.prototype = new createjs.Container();

    // Função de tratamento do click no botão. Invoca o callback armazenado.
    MyButton.prototype.handleClick = function(oEvent) {
        this.m_oClickCallback(oEvent.target);
    } 

    // Atribui o objeto ao escopo global de "window"
    window.MyButton = MyButton;
}());

// Função de inicialização. Cria o botão no onload do corpo da página.
function init() {
    g_oStage = new createjs.Stage("myCanvas");
    var oButton = new MyButton("Olá mundo!", "red", function() { alert("Funciona!"); });
    g_oStage.addChild(oButton);
    g_oStage.update();
}

EDIT: a ideia é armazenar a propriedade de forma que ela seja diferenciada entre cada nova instância do objeto (como se fosse mesmo um atributo privado ou público de uma classe em outras linguagens). Soluções em que a propriedade é compartilhada (como se fosse estática) não são o interesse da pergunta.

EDIT2:

Descobri que no createjs.Container há uma propriedade chamada this.mouseChildren que quando desabilitada faz com que o objeto target enviado no payload dos eventos de mouse seja diretamente o objeto MyButton ao invés de seus componentes (o texto ou o shape colorido de fundo). Usando essa propriedade e o objeto target eu consigo resolver o problema da seguinte forma (veja esse novo JSFiddle de exemplo, agora com duas instâncias de botão):

//. . .

// Faz o target dos eventos ser diretamente o objeto MyButton, ao invés do texto
// ou do background nele inclusos
this.mouseChildren = false;

//. . .

// Função de tratamento do click no botão. Invoca o callback armazenado.
MyButton.prototype.handleClick = function(oEvent) {
    oEvent.target.clickCallback(oEvent.target);
}

Logando o this no console, eu percebi que ele se é de fato o objeto window. Por isso não funcionava o código. Não adicionei essa conclusão como uma resposta porque ainda me resta a dúvida de por que a função de tratamento do clique do mouse não é invocada no escopo do botão e sim da janela do navegador. Alguém sabe?

4 Respostas 4

6

Nem sempre this irá se referir ao objeto que você está criando: quando você usa this.addEventListener("click", this.handleClick); o valor de this deixa de ser o objeto e passa ser o escopo global, geralmente window.

Esse problema pode ser solucionado de várias maneiras. Não vou entrar muito em detalhes pois esse tutorial (em inglês) aborta detalhadamente esse assunto, mas baseando-se nele você resolveria seu problema simplesmente fazendo isso:

/* remova */ this.addEventListener("click", this.handleClick);
/* insira */ this.addEventListener("click", this.handleClick.bind(this));
1
  • Tá ai, boa resposta. Valeu pelo link de referência. :) Commented 31/01/2014 às 20:05
3

Pelo que eu vi no seu código, em nenhum momento você declara o m_oClickCallBack dentro do escopo de MyButton. É necessário dentro do MyButtonacrescentar a linha:

var m_oClickCallBack;

Para mais informações, veja essa resposta.

1
  • Sim, é verdade, mas fiz assim porque eu entendi que usando o this.m_oClickCallback eu estaria criando uma "propriedade pública" (veja esse link: phrogz.net/JS/classes/OOPinJS.html). De todas as formas, usando var m_oClickCallBack = oClickCallBack eu obtenho o erro Uncaught ReferenceError: m_oClickCallback is not defined. Commented 31/01/2014 às 18:56
1

Luiz Vieira o problema é que o ECMAScript 5.1 (se não me engano) coloca a variável this como escopo global, o mais indicado é você substituir a linha

this.m_oClickCallback = oClickCallback;

Por

MyButton.m_oClickCallback = oClickCallback;

E na hora de chamar o m_oClickCallback você pode fazer assim

this.MyButton.m_oClickCallback(oEvent.target);
3
  • Hum, funciona. Mas qual é a "explicação" nesse caso? :) Além disso, fazendo assim a variável m_oClickCallback não vai compartilhar o valor entre todas as instâncias de MyButton? Commented 31/01/2014 às 18:59
  • 1
    Na verdade quando você coloca um MyButton.m_oClickCallback o m_oClickCallback se torna uma propriedade do MyButton Commented 31/01/2014 às 19:12
  • Como eu imaginava, a sua sugestão é de uma propriedade definida no objeto-base (algo como se fosse a 'classe', honestamente não sei como me referir a isso em Javascript) e não na instância dele. Tanto que nesse exemplo vc nota que apesar de funcionar os dois botões invocam O MESMO callback (e não é essa a intenção): jsfiddle.net/luigivieira/K6u2b/5 Commented 31/01/2014 às 19:18
1

Olha, consegui fazer funcionar veja este exemplo no JSFiddle

Mas tive que alterar seu código, talvez você não aceite a minha solução, porém, ela é funcional, o que eu fiz foi:

Nesta parte da criação:

    // Armazena a referência para o callback do evento de click
    this.m_oClickCallback = oClickCallback;

Modifiquei para:

    // Armazena a referência para o callback do evento de click
    m_oClickCallback = oClickCallback;

E aonde você atribui o evento ao botão:

// Função de tratamento do click no botão. Invoca o callback armazenado.
MyButton.prototype.handleClick = function(oEvent) {
      this.m_oClickCallback(oEvent.target);
} 

Modifiquei para:

// Função de tratamento do click no botão. Invoca o callback armazenado.
MyButton.prototype.handleClick = function(oEvent) {
  m_oClickCallback(oEvent.target);
} 

Não creio que seja a melhor solução, porém, funciona.

Espero ter ajudado.

3
  • 1
    Eu acho que nesse caso a variável está sendo declarada globalmente, e por isso funciona. Mas se eu tiver dois objetos MyButton usando a mesma variável global isso vai ser problemático, não é? Commented 31/01/2014 às 19:03
  • Vou testar com duas istâncias, e jaja te falo, mas acredito que realmente estaria sendo global. Commented 31/01/2014 às 19:04
  • 1
    Embora globais às vezes sejam necessárias, é possível evitá-las neste caso. Criar uma global dessa maneira, sem antes declará-la com var no escopo global, não é uma prática recomendada, pois caso isso cause um bug (como o que o @LuizVieira citou), ele pode ficar difícil de identificar. Sugestão: experimente programar no "strict mode" do JavaScript, que lança uma exceção se você faz uma coisa dessas. É um bom caminho para desenvolver o aprendizado da linguagem sem cair em algumas armadilhas que ela, por razões históricas, possui.
    – bfavaretto
    Commented 31/01/2014 às 21:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .