如果用（）引用一个类方法，为什么不必绑定它呢？

Question

在关于处理事件的React docs 页面上 ，它说：

通常，如果引用的方法后面没有（），例如onClick = {this.handleClick}，则应绑定该方法。

我不清楚onClick={this.handleClick}和onClick={this.handleClick()}之间的区别，也不清楚为什么使用()意味着不需要绑定this 。

在理解上的任何帮助将不胜感激。

Answer 1

this.handleClick引用一个函数。 this.handleClick()调用该函数。

使用()并不需要绑定，不仅仅只是在调用this.handleClick() javacript“知道” this引用的上下文中。

因此，如果我致电：

this.handleClick(); 

从上下文可以明显看出this是什么。

但是如果我打电话

const foo = this.handleClick;
foo();

我仍然在调用相同的函数，但是this的原始引用已经消失了。

至于“为什么”。 我不知道这样做的历史原因，但这是定义Javascript的副作用。 如果不是这种情况，JavaScript语言可能会更好一些，但这就是该语言的工作方式。 我不确定这是否令人满意。

Answer 2

当影响函数引用到一个新的变量，上下文（由refered this该函数内部）不被复制。

在下面的代码段中，saysHi函数使用this 。 它引用的对象根据其调用或绑定的方式而变化。

 const jack = { name : 'Jack', saysHi : function() { console.log("Hi, I'm " + this.name); } }; jack.saysHi(); // this will reference jack const someoneSaysHi = jack.saysHi; someoneSaysHi(); // this will not reference jack anymore, but the global object window const joe = { name : "Joe" }; const joeSaysHi = someoneSaysHi.bind(joe); joeSaysHi(); // this will reference joe, because you bound the function to joe 

• 通过调用jack.saysHi() ，这将是对jack的引用。 我用调用函数。 操作符，在jack对象的上下文中调用它。
• 通过设置const someoneSaysHi = jack.saysHi ; 然后调用someoneSaysHi () ，而没有任何上下文。 因此， this将是对全局对象window的引用。 这是语言的功能。
• 通过将someoneSaysHi绑定到joe上下文，我创建了一个新函数，并且在该函数中，这将是对joe的引用。

更完整的答案： “ this”关键字如何工作？

现在，关于您的问题：

通常，如果引用的方法后面没有（），例如onClick = {this.handleClick}，则应绑定该方法。

onClick属性需要一个函数引用才能附加到click事件。

• onClick={this.handleClick()}将立即调用this.handleClick （具有正确的上下文），并将click事件附加到this.handleClick函数的返回值。
• 没有绑定任何内容的onClick={this.handleClick}会将click事件附加到handleClick函数，但是在这种情况下， handleClick函数内部的this将成为事件的当前目标（您单击的元素）-这是一个功能事件处理程序。
• onClick={this.handleClick.bind(this)}会将click事件附加到绑定到this引用的对象的新函数引用上。