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();
}