当一个函数中有两个类时会出现这个问题

Question

我在一个函数中有两个类，由于某种原因，第二个函数this没有被正确识别。

类是Emitter和Receiver。

我试图弄清楚为什么this这里没有被正确拾取。该日志包含在以下代码中：

const chat = (messages) => {

  class Emitter {

    constructor(messages = []) {

      this.messages = messages;

      this.event = () => {};

    }

    setEvent(fn) {

      this.event = fn;

    }

    trigger() {

      this.messages.forEach(message => this.event(message));

    }

  }

  class Receiver {

    constructor() {

      this.messages = [];

      // this prints correctly here

      ---> Receiver { messages: [] }

      console.log('this  ===> ', this)

    }

    ping(message) {

      console.log('this ===>', this)

      // this here prints the following

      this ===> Emitter {

        messages: [ 'Hi', 'Hola', 'Bonjour', 'Hi' ],

        event: [Function: ping] }

          this.messages.push(message);

       }

  }

  const myReceiver = new Receiver();

  const myEmitter = new Emitter(messages);

  myEmitter.setEvent(myReceiver.ping);

  myEmitter.trigger();

  return myReceiver.messages;

};

Answer 1

this取决于调用它的范围，而不是定义它的范围 。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this 在调用 myEmitter.setEvent(myReceiver.ping) 时，只有函数 ping 被传递给 myEmitter，而不是它的作用域我的收件人。如果您想传递 myRevciever 范围，可以将其绑定到函数调用。myEmitter.setEvent(myReceiver.ping.bind(myReceiver));