3

When specifying a handler function in jQuery, is there a difference between specifying a named function for a handler or wrapping your named function in an anonymous function?

Specifying a named function:

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

versus wrapping named function in an anonymous function:

$( "#foo" ).on( "click", function() {
  bar();
})
wkm
  • 1,764
  • 6
  • 24
  • 40
  • 2
    `this` will not be bound in `bar` in the second one. – Barmar Jul 05 '14 at 16:44
  • 2
    To clarify @Barmar's comment, `this` *will* be bound in the second, but not to the element which was clicked. The main difference between the two is the calling context, which is what determines what `this` refers to. – JAAulde Jul 05 '14 at 16:47

3 Answers3

1

Only if you want to be able to call the function again later.

John C
  • 666
  • 4
  • 8
  • Why can't he call `bar` later in the second version? – Barmar Jul 05 '14 at 16:46
  • I misread the example. you're correct. 'bar' is still the same function, regardless of where it is called. I thought in the second example he was placing the code for the function bar, not calling it. – John C Jul 05 '14 at 16:47
1

They're almost equivalent. The equivalent version with the anonymous function would be:

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

When jQuery runs an event handler, it binds the context to the target element. this.bar() passes that binding along to the function.

If you want to be able to remove a specific handler with .off(), you need to use the first version with the named function. If you use an anonymous function, there's no way to refer to it when removing it.

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Are you sure you can chain `bar()` to an element ? How about `bind()` (or call / apply) ? – adeneo Jul 05 '14 at 16:47
  • I'm not chaining anything. I'm just reproducing the way that jQuery binds `this` to the event target when it calls an event handler. – Barmar Jul 05 '14 at 16:49
  • Do I have to use `bar.call(this, event)` to emulate it properly? – Barmar Jul 05 '14 at 16:51
  • 1
    Well, that's one way to do it! `this` is a native DOM element, why would it have a `bar()` method? calling it with `call()` and setting the value of `this` would work fine. – adeneo Jul 05 '14 at 16:51
  • 1
    I think jQuery does `bar.apply(this, arguments)` in `$.fn.on` – adeneo Jul 05 '14 at 16:54
1

As other have said, a named function usually implies you have a reference to the function object, which allows you to easily remove the event handler without resorting to less eloquent tactics.

But, a named function in general is nicer if you use javascript debuggers. It's really nice when looking at a stack trace if each stack frame has a sensible name instead of "annonymous function".

PS - you can name the function expression like so

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

Giving you short syntax, a named function to later remove the event handler with, useful binding of "this", and better stack traces.

goat
  • 31,486
  • 7
  • 73
  • 96