Soy nuevo en JS y especialmente en clase en JS. No entiendo completamente cómo funcionan las clases. Por favor ayúdame en la siguiente pregunta. Esta es una página simple con un botón. Quiero que ejecute una función (doThis()) después de hacer clic en el botón. Pero da un error diciendo que la función no está definida.
class Test { constructor() { this.button = document.getElementById("but1"); this.button.addEventListener("click", this.butClick); } butClick() { console.log("clicked"); this.doThis(); } doThis(){ console.log("Inside doThis") } } t1 = new Test(); <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <button id="but1">Click me</button> <script src="test.js"></script> </body> </html>this.button.addEventListener("click", this.butClick); debería ser this.button.addEventListener("click", this.butClick.bind(this)); .
Sin bind(this) , this inside butClick es solo el elemento del button , no la class Test .
class Test { constructor() { } butClick() { console.log("clicked"); this.doThis(); } doThis(){ console.log("Inside doThis") } } t1 = new Test(); const button = document.getElementById("but1") button.addEventListener('click', event => { event.preventDefault() // Call doThis method on t1, the instance... t1.doThis() }) <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <button id="but1">Click me</button> <script src="test.js"></script> </body> </html>He escrito un artículo breve y útil sobre el uso de clases en JS, debería ayudar, vaya al artículo aquí .