Question

＆＃39;功能＆＃39;在下面做什么？

$('.event-row').on('mouseover',function(){
  arc.event_handler.event_row_over();
  });

$('.event-row').on('mouseover',arc.event_handler.event_row_over );

Answer 1

有一个非常重要的区别。

第一个将使用~~上下文~~将this值作为event_handler对象调用该函数。
第二个将调用带有~~上下文~~其值this值的函数作为处理程序绑定到的DOM元素。

所以第一个保留了预期的~~调用上下文~~ this值，这可能是函数所需要的。

Answer 2

在第一种情况下，该函数内部使用匿名函数this绑定到导致该事件的DOM元素。这是一种在浏览器中很常见的约定，也可以在本机绑定事件时完成。但是，在致电arc.event_handler.event_row_over();时，this会重新绑定到arc.event_handler内的event_row_over;因为它被称为对象方法，在这种情况下this指向调用该方法的对象。该方法将在没有任何参数的情况下调用。

在第二种情况下，您为事件注册函数arc.event_handler.event_row_over。当调用jQuery将this设置为相关元素，因此在event_row_over内，this指向该元素。除非存在指向它的其他变量，否则arc.event_handler在那里不可用。 jQuery还将事件对象作为第一个参数传递，因此使用该参数调用该方法。

通常，对象方法期望this成为它们的对象，因此几乎在每种情况下你都希望使用匿名函数来包装调用。如果元素很重要，请将this作为参数传递给方法。

另一种没有匿名函数的方法是使用每个函数的bind()方法：

$('.event-row').on('mouseover', arc.event_handler.event_row_over.bind(arc.event_handler));

但是，只有现代浏览器本身支持此功能。

Answer 3

在第一种情况下，您将函数调用包含在匿名函数中。

在第二种情况下，您只需指定函数指针..

Answer 4

首先，似乎有一个额外的点。arc.event_handler.event_row_over.();应该只是arc.event_handler.event_row_over();

所有匿名函数都会调用event_row_over对象的名为arc.event_handler的成员函数;并且它不会返回任何内容。

Answer 5

＆＃39;功能＆＃39; keyword将创建一个新的闭包并封装作用域。关于闭包的好文章https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures。

Answer 6

该功能的上下文/范围将不相同。

另外，第二个，

$('.event-row').on('mouseover',arc.event_handler.event_row_over );

你将事件对象作为参数。

Answer 7

第一种情况，你有一个额外的函数包装器。当你想在调用真实事件处理程序'arc.event_handler.event_row_over（）'之前做其他事情时这很有用，例如你可以做类似下面的事情：

$('.event-row').on('mouseover',function(){
  doPreEventHandling();
  arc.event_handler.event_row_over();
  doPostEventHandling();
});

另一方面，您甚至可以将该匿名函数提取为命名函数，并调用如下：

var eventHandler = function(){
      doPreEventHandling();
      arc.event_handler.event_row_over();
      doPostEventHandling();
};

$('.event-row').on('mouseover', eventHandler);

以上所有内容的行为都相似，但更多的包装函数可以获得更多的抽象。但它会影响性能和有时可读性。

这两个javascript调用有什么区别？

7 个答案: