Javascript：定义为箭头函数的覆盖方法在父级中看不到答案

【问题标题】：Javascript: overriden methods defined as arrow functions are not seen in parentJavascript：定义为箭头函数的覆盖方法在父级中看不到
【发布时间】：2019-07-19 16:36:27
【问题描述】：

我在我的应用程序中使用父类为其子类提供一些基本功能。大致是这样的：

class Base {
  constructor(stream) {
    stream.subscribe(this.onData)
  }

  onData(data) {
    throw new Error('"onData" method must be implemented')
  }
}

class Child extends Base {
  onData(data) {
    // do stuff...
  }
}

效果很好，当我实例化 Child 时，Base 将 Child.onData 传递给 stream 唯一的问题是范围。在Child.onData 中，我大量使用通过this 关键字在child 中定义的其他方法。因此，当我将此函数作为回调传递给stream 时，一切都会中断。明显的解决方案是：

class Base {
 constructor(stream) {
   stream.subscribe(this.onData)
 }

 onData = (data) => {
   throw new Error('"onData" method must be implemented')
 }
}

class Child extends Base {
 onData = (data) => {
   // do stuff...
 }
}

这确实解决了范围问题，但现在传递给stream 的函数始终是Base.onData，这会引发错误。一般来说，我可以做一些事情，比如将Child.onData 传递给Base 构造函数。这可行，但我想找到一个更优雅的解决方案，如果它存在的话

【问题讨论】：

我很难理解您的问题...
很可能会坏掉，因为你传递的时候需要绑定它。
@GetOffMyLawn 基本上覆盖的属性不能从父级访问，我需要它
这是因为子级分配了this.onData 属性之后 super() 构造函数运行并安装了旧的、未覆盖的值作为流处理程序。所以 a) 当你计划重写继承的方法时不要使用箭头函数 b) don't call (or otherwise use) overridable methods in the constructor.
您应该在Base 构造函数中简单地bind 方法（或使用箭头函数包装器）

标签： javascript oop inheritance babeljs

【解决方案1】：

这就是arrow functions in class properties are not that great 的原因。如果你把它翻译成一个普通的 ES6 类，会发生这样的事情：

class Child extends Base {
  constructor(...args) {
    super(...args);
    this.onData = (data) => {
      // do stuff...
    };
  }
}

现在很明显为什么在 Base 构造函数中使用该属性不起作用。

相反，您应该使用普通的方法定义并通过在父构造函数中绑定方法来处理context problem：

class Base {
  constructor(stream) {
    if (this.onData == Base.prototype.onData)
      throw new Error('"onData" method must be overridden')
    this.onData = this.onData.bind(this);
    stream.subscribe(this.onData)
  }

  onData(data) {}
}

class Child extends Base {
  onData(data) {
    // do stuff...
  }
}

【讨论】：