为处理程序或匿名函数指定命名函数的区别?

时间:2014-07-05 16:41:52

标签: javascript jquery handlers

在jQuery中指定处理函数时,为处理程序指定命名函数还是在匿名函数中包装命名函数之间有区别吗?

指定命名函数:

$( "#foo" ).on( "click", bar);

与在匿名函数中包装命名函数:

$( "#foo" ).on( "click", function() {
  bar();
})

3 个答案:

答案 0 :(得分:1)

仅当您希望以后能够再次调用该功能时。

答案 1 :(得分:1)

它们几乎相同。具有匿名函数的等效版本将是:

$( "#foo" ).on( "click", function(event) {
    bar.call(this, event);
});

当jQuery运行事件处理程序时,它会将上下文绑定到目标元素。 this.bar()将绑定传递给函数。

如果您希望能够使用.off()删除特定处理程序,则需要使用具有指定函数的第一个版本。如果您使用匿名函数,则在删除它时无法引用它。

答案 2 :(得分:1)

正如其他人所说,命名函数通常意味着你有一个对函数对象的引用,这使你可以轻松地删除事件处理程序,而不需要采用不那么雄辩的策略。

但是,如果使用javascript调试器,一般来说命名函数更好。如果每个堆栈帧都有一个合理的名称而不是"匿名函数",那么在查看堆栈跟踪时非常好。

PS - 你可以像这样命名函数表达式

$( "#foo" ).on( "click", function bar() {
    // "this" will be bound to the clicked element
});

为您提供简短的语法,一个命名函数,以便稍后删除事件处理程序,有用的绑定"此"以及更好的堆栈跟踪。