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

Question

接下来，“功能”有什么作用？

$('.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值， 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

“ function”关键字将创建一个新的闭包并封装作用域。 关于闭包的好文章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);

以上所有内容在行为上都是相似的，但是更多的包装器函数可以使您获得更多的抽象。 但这会影响性能，有时还会影响可读性。