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?