为什么我的接收者的类实例方法没有收到任何数据？

马特哈蒙德

我创建了一个基本的发射器和接收器。请你告诉我为什么当我控制台记录接收器消息时它返回一个空数组？

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);

彼得·塞利格

从上面的评论...

“在setEvent编写代码时并不关心......的this上下文myReciever.ping......ping被分配给一个发射器自己的event功能，立即忘记它最初属于哪里。”

除了已经建议的主动bind调用thisArg其方法的解决方案之外，还可以以一种可以或必须传递到setEvent方法的目标/上下文以及方法/函数本身的方式来调整代码。在trigger时间的方法，然后将这种存储的上下文中被调用...

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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。