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中，this是在调用函数时确定的。在您的情况下，将使用sound(a)的{{1}}上下文调用this。

如果您坚持在undefined中使用this，则有两种常见的解决方案：

使用类属性函数（箭头函数）代替方法
在构造函数中绑定sound(a)上下文

第一种方法已由React推广，并且效果很好，因为用户创建的React组件是最终类。但是，如果您正在进行面向对象的编程，并且希望继承this类，则不能将这种方法用于it breaks inheritance。

解决方案

将执行上下文绑定到构造函数中您的类的实例。

Cat

Answer 2

这是因为在传递 this 时使用Javascript this上下文。传递 this 时，应始终将其绑定到当前上下文

此关键字根据调用上下文而绑定到不同的值。但是，使用箭头功能时，这在词法上受约束。这意味着它使用包含箭头功能的代码中的 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"
 }
}

TS-回调中未定义类方法

2 个答案: