¿Alguien puede explicar dónde va mal mi pensamiento aquí? Tengo una clase que agrega un detector de eventos mousedown a un lienzo específico. Hago dos instancias de la clase adjuntas a dos lienzos diferentes. Espero obtener respuestas de ambas instancias, pero todas las respuestas dicen que son de la segunda instancia.
class Mycanvas{ constructor (canvas,name){ self = this; this.name=name; canvas.addEventListener('mousedown', mousedown); } function mousedown(){console.log(self.name)} } let mycanvas1 = Mycanvas(canvas1,'1'); let mycanvas2 = Mycanvas(canvas2,'2');PERO, este código funciona bien:
class Mycanvas{ constructor (canvas,name){ this.name=name; canvas.addEventListener('mousedown', ()=>console.log(this.name)); } } let mycanvas1 = Mycanvas(canvas1,'1'); let mycanvas2 = Mycanvas(canvas2,'2');Mycanvas(canvas1,'1') directamente (sin la new palabra clave), que, creo, solo llama a su constructor sin instanciar una nueva Clase. Esto no genera el resultado esperado y te hace creer que necesitas el truco self=this . Pero las clases funcionan así:
class Mycanvas{ constructor (canvas, name){ this.name=name; this.canvas = canvas; } logMyName() { this.canvas.addEventListener('mousedown', () => console.log(`My name is ${this.name}`)); } } let mycanvas1 = new Mycanvas(canvas1,'1'); mycanvas1.logMyName(); let mycanvas2 = new Mycanvas(canvas2,'2'); mycanvas2.logMyName(); canvas { border: grey solid 1px; width: 50px; height: 50px; cursor: pointer; } <canvas id="canvas1"></canvas> <canvas id="canvas2"></canvas>