Siempre estoy trabajando con el antiguo javascript de vainilla (es5) con algunas funciones de ES6, ahora estoy trabajando en algo, así que creé una clase para mostrar mi contenido html, en una página web, luego agregué un clic
mi clase es:
class Field { constructor(key, label, status, isUnsubscribed){ this.key = key; this.label = label; this.status = status; this.isUnsubscribed = isUnsubscribed; } // want this to be executed on click test(){ alert(this.key); } returnHTMLField(){ // Global Container let fieldContainer = document.createElement("div"); fieldContainer.addEventListener("click", function(){ // issue here, this return the element itself, which makes sense this.test() }) return fieldContainer; } }Básicamente, estoy creando un objeto con un método que agrega el componente al DOM, esto funciona bien con la ayuda de otra clase, pero ahora, cada vez que hago clic, quiero que se ejecute la función de prueba, pero esto dentro de la acción eventListener es ' Al devolver el estado del objeto , está devolviendo el componente (elemento DOM), que es un comportamiento normal, no sé cómo puedo ejecutar la función de prueba dentro del detector de eventos.
Cualquier ayuda sería muy apreciada
Entonces, si prefiere ES5, simplemente .bind(this) it.
class Field { constructor(opts){ Object.assign(this, opts); // Bonus ES6 code here } // want this to be executed on click test(){ alert(this.key); } returnHTMLField(){ // Global Container let fieldContainer = document.createElement("div"); fieldContainer.addEventListener("click", function(){ // issue here, this return the element itself, which makes sense this.test() }.bind(this)) // <--- HERE return fieldContainer; } } var f = new Field({ key : 10 , label : "Test" , status : "OK" , isUnsubscribed: false }); console.log(f.returnHTMLField().dispatchEvent(new Event("click")));Puede usar la función de arrow para vincular this al ámbito principal en lugar de crear un ámbito lexical separado.
class Field { constructor(key, label, status, isUnsubscribed){ this.key = key; this.label = label; this.status = status; this.isUnsubscribed = isUnsubscribed; } // want this to be executed on click test(){ alert(this.key); } returnHTMLField(){ // Global Container let fieldContainer = document.createElement("div"); fieldContainer.addEventListener("click",() => { // issue here, this return the element itself, which makes sense this.test() }) return fieldContainer; } }Intenta usar una función de flecha:
fieldContainer.addEventListener("click", ()=>{ this.test() })