`this`

Question

In a previous question，我被鼓励提出这样的跟进：如果我只知道some.func，将函数(arg) => some.func(arg)包装成some.func之类的内容会有什么不同有一个论点？

作为一个具体的例子：在我的另一个问题中，我发现使用

之间存在惊人的差异

.on("mouseover", tip.show)

与

.on("mouseover", (d) => tip.show(d))

在这种情况下，第一个版本确实具有预期的行为，而第二个版本的行为则不同（请参阅jsfiddle of other question）。这里的原因是我不小心让tip成为全球性的。

更一般的问题：为什么它们首先表现不同？

Answer 1

当您使用tip.show(d)时，将调用该函数作为tip值传递this。

当您使用tip.show作为事件侦听器时，将使用当前事件目标作为this值进行调用。

＆＃13;

var obj = {checkThis: function(e) {
  console.log(this === e.currentTarget, this === obj);
}};
document.body.addEventListener('click', obj.checkThis);         // true, false
document.body.addEventListener('click', e => obj.checkThis(e)); // false, true
document.body.click();

＆＃13;

Answer 2

有两个主要区别。

我们需要查看更多上下文来确定在这种情况下应用哪些内容。

`this`

this函数中show的值取决于函数的调用方式。

如果事件处理程序是函数本身，则this是绑定事件处理程序的对象。

如果事件处理程序是调用tip.show的函数，则this为tip。

进一步阅读：How does the “this” keyword work?

时序

在一种情况下，在注册事件处理程序时评估tip.show的值。

在第二个中，在触发事件处理程序时评估该值。

在闭包中包装函数的区别？

2 个答案:

`this`

时序