javascript - pasar - getelementbyid
¿Métodos de clase como controladores de eventos en JavaScript? (4)
¿Hay alguna forma recomendada o más común en JavaScript para que los miembros de la clase actúen como controladores de eventos?
Considere el siguiente ejemplo sencillo:
<head>
<script language="javascript" type="text/javascript">
ClickCounter = function(buttonId) {
this._clickCount = 0;
document.getElementById(buttonId).onclick = this.buttonClicked;
}
ClickCounter.prototype = {
buttonClicked: function() {
this._clickCount++;
alert(''the button was clicked '' + this._clickCount + '' times'');
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="Click me" />
<script language="javascript" type="text/javascript">
var btn1counter = new ClickCounter(''btn1'');
</script>
</body>
Se llama al botón del manejador de eventos, pero el miembro _clickCount es inaccesible, o esto apunta a algún otro objeto.
¿Alguna buena sugerencia / artículos / recursos sobre este tipo de problemas?
Una función adjunta directamente a la propiedad onclick tendrá this propiedad del contexto de ejecución apuntando al elemento.
Cuando necesite un evento de elemento para ejecutarse en una instancia específica de un objeto (a la vez, un delegado en .NET), necesitará un cierre: -
function MyClass() {this.count = 0;}
MyClass.prototype.onclickHandler = function(target)
{
// use target when you need values from the object that had the handler attached
this.count++;
}
MyClass.prototype.attachOnclick = function(elem)
{
var self = this;
elem.onclick = function() {self.onclickHandler(this); }
elem = null; //prevents memleak
}
var o = new MyClass();
o.attachOnclick(document.getElementById(''divThing''))
ClickCounter = function(buttonId) {
this._clickCount = 0;
var that = this;
document.getElementById(buttonId).onclick = function(){ that.buttonClicked() };
}
ClickCounter.prototype = {
buttonClicked: function() {
this._clickCount++;
alert(''the button was clicked '' + this._clickCount + '' times'');
}
}
No sé por qué Function.prototype.bind no se mencionó aún aquí. Así que dejaré esto aquí;)
ClickCounter = function(buttonId) {
this._clickCount = 0;
document.getElementById(buttonId).onclick = this.buttonClicked.bind(this);
}
ClickCounter.prototype = {
buttonClicked: function() {
this._clickCount++;
alert(''the button was clicked '' + this._clickCount + '' times'');
}
}
Puede usar la sintaxis fat-arrow, que se une al alcance léxico de la función
function doIt() {
this.f = () => {
console.log("f called ok");
this.g();
}
this.g = () => {
console.log("g called ok");
}
}
Después de eso puedes intentar
var n = new doIt();
setTimeout(n.f,1000);
Puede probarlo en babel o si su navegador es compatible con ES6 en jsFiddle .
Desafortunadamente, la clase-ESntax ES6 no parece permitir la creación de una función vinculada léxicamente a esto. Personalmente creo que bien podría hacer eso. EDITAR: parece haber una característica experimental ES7 para permitirlo .