如何在JavaScript中从Class B调用Class A的processMessage方法？

问题核心是onmessage函数里的this指向错误——这里的this并非Class A的实例，而是当前的delegate对象或Class B实例，因此找不到processMessage方法。以下是几种可行的修复方式：

方法1：提前保存Class A的实例引用 #

在register方法里先把A的实例用变量存好，后续在onmessage里用这个变量调用方法：

class A {
  constructor() {}
  register() {
    const self = this; // 保存A的实例引用
    this.otherClass = new B()
    this.otherClass.delegate = {
      onmessage(message) {
        console.log(message)
        self.processMessage(message) // 通过self调用A的方法
      }
    }
  }

  processMessage(message) {
    console.log(message)
  }
}

方法2：使用箭头函数 #

箭头函数不会绑定自身的this，它会继承外层作用域（即register方法里的this，也就是A的实例）的this：

class A {
  constructor() {}
  register() {
    this.otherClass = new B()
    this.otherClass.delegate = {
      onmessage: (message) => { // 替换为箭头函数
        console.log(message)
        this.processMessage(message) // 此时this指向A的实例
      }
    }
  }

  processMessage(message) {
    console.log(message)
  }
}

方法3：用bind绑定this #

将onmessage函数的this强制绑定到A的实例上：

class A {
  constructor() {}
  register() {
    this.otherClass = new B()
    this.otherClass.delegate = {
      onmessage: function(message) {
        console.log(message)
        this.processMessage(message)
      }.bind(this) // 绑定this到A的实例
    }
  }

  processMessage(message) {
    console.log(message)
  }
}

这三种方法都能让onmessage正确调用到Class A的processMessage函数，按需选择即可。

内容的提问来源于stack exchange，提问作者Rushikesh Koli