javascript - 无法将反跳分配给类属性

我正在使用带有第2阶段预设的Babel，并且有一个像这样的React组件类：

class Test extends Component {
  someValue = 'Hello';

  componentDidMount() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);
    window.addEventListener('resize', this.debouncedHandleResize);
  }

  handleResize = () => {
    console.log(this.someValue);
  }
}

这按预期工作。窗口调整大小后1000毫秒，将触发handleResize方法，并且控制台记录“ Hello”。

为什么我不能执行以下操作？

class Test extends Component {
  someValue = 'Hello';

  debouncedHandleResize = debounce(this.handleResize, 1000);

  componentDidMount() {
    window.addEventListener('resize', this.debouncedHandleResize);
  }

  handleResize = () => {
    console.log(this.someValue);
  }
}

在这种情况下，我得到一个错误：

TypeError: Expected a function

我必须缺少一些东西，但我认为这基本上都是将属性值分配给类的方法。

最佳答案

由于您已经更新了代码：问题是debouncedHandleResize和handleResize都是公共类字段。因为debouncedHandleResize分配是第一个，所以您尝试引用handleResize之前它已经存在。

公共类字段按顺序求值，因此

class Test {
  debouncedHandleResize = debounce(this.handleResize, 1000);

  handleResize = () => {
    console.log(this.someValue);
  }
}

相当于

class Test {
  constructor() {
    this.debouncedHandleResize = debounce(this.handleResize, 1000);

    this.handleResize = () => {
      console.log(this.someValue);
    }
}

很明显为什么这行不通。

解

更改分配顺序：

class Test {
  handleResize = () => {
    console.log(this.someValue);
  }
  debouncedHandleResize = debounce(this.handleResize, 1000);
}