Creé un emisor y un receptor básicos. Por favor, ¿puede decirme por qué cuando registro en la consola los mensajes de los receptores, devuelve una matriz vacía?
class Emitter { constructor(messages = []) { this.messages = messages; this.event = () => {}; } setEvent(fn) { this.event = fn; } trigger() { this.messages.forEach(message => this.event(message)); } } class Reciever { constructor() { this.messages = [] } ping(message) { console.log(message) this.messages.push(message) } } const myReciever = new Reciever(); const myEmitter = new Emitter(message = ["A", "B", "C"]); myEmitter.setEvent(myReciever.ping); myEmitter.trigger(); console.log(myReciever.messages);Estás perdiendo contexto en la llamada de ping :
myEmitter.setEvent(myReciever.ping);Necesitas atarlo.
myEmitter.setEvent(myReciever.ping.bind(myReciever));Estás almacenando todo en el emisor, no en el receptor. Si imprime el emisor, las entradas se duplican.
Esto se debe a que cuando pasa la función a .setEvent(...) está usando this que, en este escenario, se refiere a los mensajes del emisor; perdió el contexto del objeto al que pertenece.
Como indicó @MinusFour, debe vincular la función en su lugar.
Ver demostración a continuación
class Emitter { constructor(messages = []) { this.messages = messages; this.event = () => {}; } setEvent(fn) { this.event = fn; } trigger() { this.messages.forEach(message => this.event(message)); } } class Reciever { constructor() { this.messages = [] } ping(message) { console.log(message) this.messages.push(message) } } const myReciever = new Reciever(); const myEmitter = new Emitter(message = ["A", "B", "C"]); myEmitter.setEvent(myReciever.ping.bind(myReciever)); myEmitter.trigger(); console.log(myReciever.messages);Del comentario de arriba...
"En el momento de
setEvent, al código no le importa el contextothisdemyReciever.ping...pingse asigna a uneventpropio de los emisores como una función, y de inmediato se olvida de dónde pertenecía originalmente".
Además de la solución ya sugerida de bind activamente thisArg a su método, también se puede adaptar el código de manera que uno pueda o tenga que pasar a setEvent el objetivo/contexto de un método junto con el método/función en sí. En el momento del trigger , se llamará al método dentro de este contexto almacenado...
class Emitter { constructor(messages = []) { this.messages = messages; this.handler = () => {}; this.target = null; } setEvent(handler, target) { // `setEvent` might be better renamed to // `setHandler` or `assignHandler`, etc. this.handler = handler ?? (() => {}); this.target = target ?? null; } trigger() { this.messages.forEach(message => this.handler.call(this.target, message) ); } } class Reciever { constructor() { this.messages = [] } ping(message) { console.log(message) this.messages.push(message) } } const myReciever = new Reciever(); const myEmitter = new Emitter(message = ["A", "B", "C"]); myEmitter.setEvent(myReciever.ping, myReciever); myEmitter.trigger(); console.log(myReciever.messages);