javascript - 无法将去抖动分配给类属性

Question

我正在使用带有 Stage 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

我一定错过了一些东西，但我认为这两种基本上都是为类分配属性值的方法。

Answer 1

既然您更新了代码:问题是 debouncedHandleResize 和 handleResize 都是公共(public)类字段。由于 debouncedHandleResize 赋值首先出现，因此您尝试在 handleResize 存在之前引用它。

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

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);
}