Javascript 为处理程序或匿名函数指定命名函数有什么区别?

Javascript 为处理程序或匿名函数指定命名函数有什么区别?,javascript,jquery,handlers,Javascript,Jquery,Handlers,在jQuery中指定处理程序函数时,为处理程序指定命名函数与将命名函数包装到匿名函数之间是否有区别 指定命名函数: $( "#foo" ).on( "click", bar); $( "#foo" ).on( "click", function() { bar(); }) 与在匿名函数中包装命名函数相比: $( "#foo" ).on( "click", bar); $( "#foo" ).on( "click", function() { bar(); }) 仅当您希望以后能够

在jQuery中指定处理程序函数时,为处理程序指定命名函数与将命名函数包装到匿名函数之间是否有区别

指定命名函数:

$( "#foo" ).on( "click", bar);
$( "#foo" ).on( "click", function() {
  bar();
})
与在匿名函数中包装命名函数相比:

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

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

它们几乎是等价的。具有匿名函数的等效版本为:

$( "#foo" ).on( "click", function(event) {
    bar.call(this, event);
});
当jQuery运行事件处理程序时,它将上下文绑定到目标元素
this.bar()
将该绑定传递给函数


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

正如其他人所说,命名函数通常意味着您拥有对函数对象的引用,这使您可以轻松删除事件处理程序,而无需诉诸不太雄辩的策略

但是,如果使用javascript调试器,命名函数通常会更好。当查看堆栈跟踪时,如果每个堆栈帧都有一个合理的名称而不是“annonymous函数”,这将非常好

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

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

为您提供了简短的语法,一个命名函数,用于稍后删除事件处理程序,其中包含有用的“this”绑定和更好的堆栈跟踪。

将不会在第二个中绑定到
条中
。为了澄清@Barmar的注释,
将在第二个中绑定,但不会绑定到单击的元素。两者之间的主要区别在于调用上下文,它决定了此所指的内容。为什么他不能在第二个版本中稍后调用
bar
?我误读了示例。你说得对“bar”仍然是同一个函数,不管在哪里调用它。我认为在第二个示例中,他是在为函数栏放置代码,而不是调用它。您确定可以将
bar()
链接到元素吗?怎么样
bind()
(或者调用/应用)?我没有链接任何东西。我只是在复制jQuery调用事件处理程序时将
this
绑定到事件目标的方式。我是否必须使用
bar.call(this,event)
来正确模拟它?这是一种方法
这是一个本地DOM元素,为什么它会有一个
bar()
方法?使用
call()
调用它,并设置
this
的值就可以了。我认为jQuery在
$.fn.on