typescript - TS - 回调中未定义类方法

Question

我认为代码值一千字。举这个例子

class Cat {

 constructor() {
  this.meow("roar", this.sound)
 }

 meow(a, callback) {
  callback(a)
 }

 sound(a) {
  console.log(a)
  console.log(this.sayMeow) <----- THIS IS UNDEFINED
 }

 sayMeow() {
  return "Meow"
 }
}

如您所见，方法 sayMeow()未定义。您能解释一下为什么以及如何解决吗？

这只是我必须使用回调的更复杂代码的简化表示。我需要知道为什么方法在回调函数中未定义。请不要对这个简单的 Cat 类进行修改。

谢谢

Answer 1

这是因为 Javascript 在传递 时会出现此上下文这个 .
当通过这个您应该始终将其绑定(bind)到当前上下文

这个关键字根据调用它的上下文绑定(bind)到不同的值。然而，对于箭头函数，这是词法绑定(bind)的。这意味着它使用这个从包含箭头函数的代码中。

箭头功能:

() => {}

箭头函数在词法上绑定(bind)它们的上下文，因此 this 实际上是指原始上下文。

class Cat {

 constructor() {
  this.meow("roar", this.sound)
 }

 meow(a, callback) {
  callback(a)
 }

 sound = (a) => {
  console.log(a)
  console.log(this.sayMeow)
 }

 sayMeow() {
  return "Meow"
 }
}