Question

我正在查看以下代码：https://reactjs.org/docs/state-and-lifecycle.html

我不明白为什么我需要使用() => this.tick()而不是this.tick()。先前调用了使用this.tick()的函数，但是当我将() => this.tick()更改为this.tick()时，代码停止工作。 this.tick()即使本身是一个函数，也不再被调用。 () => this.tick()似乎只是不必要的步骤，但有必要。

我认为我误解了作为对象的功能。

谢谢

Answer 1

() => this.tick()是一个函数，执行该函数后将在适当的上下文中调用this.tick()。如果您不想使用箭头语法，则需要绑定this上下文，类似于this.tick.bind(this);

Answer 2

在那里使用的箭头函数需要绑定this上下文，以便它可以在其自己的函数中使用this。

如果只有setTimeout( this.tick, 1000 )，它将正确地在类上调用该函数，但是，该函数将没有this范围...

...除非您将此范围绑定在构造函数中，或者作为setTimeout调用本身的一部分

要在构造函数中执行此操作，您将拥有类似的东西

class Clock extends Component {
  constructor() {
    super();
    this.tick = this.tick.bind(this);
  }
  // other functions
  tick() {
    this.setState(/*.. state content ..*/):
  }
}

另一个选择是

setTimeout( this.tick.bind( this ), 1000 );

但是这与箭头函数为您所做的一样，所以为什么不使用箭头函数呢？

另一种选择是实验类属性，在该类属性中您仍将具有箭头功能，但是由于这并不是测试的最佳解决方案，因此我不会直接讨论它。

Answer 3

首先，setInterval将函数作为参数。因此，除非this.tick返回一个函数，否则将this.tick()传递给setInterval是不正确的。

setInterval延迟事件循环中的回调方法。因此，在执行之时，对this的当前引用将丢失，因为它的范围在其父函数之内，而父函数已经完成了执行。因此，this将在严格模式下指向window或undefined。

要使其工作，您需要保留引用，我们将通过创建新函数() => this.tick为该引用创建一个闭包。现在，即使父函数完成了引用，引用也会保留下来。

Answer 4

如果您传递() => this.tick()，那么您正在传递函数。
如果传递this.tick()，则传递的是函数返回的值。
setInterval(func, delay[, param1, param2, ...])需要一个函数作为第一个参数。

Answer 5

您需要为该函数提供要调用的回调。回调是要在另一个函数完成之后执行的函数。例如，使用setTimeout是内置函数，您可以给tick提供回调，因为一旦setTimeout完成，您希望调用tick。

希望这会有所帮助！

为什么“（）=> this.tick（）”和“ this.tick（）”不同？

5 个答案: