importance of function wrappers in javascript

Question

Can someone explain to me the importance of using function wrappers (ie: when assigning onclick functionality)? I know I should, but I don't fully understand why...

Example: It's my understanding that this:

$(callingImg)[0].setAttribute("onclick", "function(){removeChildren(this);}");

is better than this:

$(callingImg)[0].setAttribute("onclick", "removeChildren(this)");

Answer 1

So you can reuse the functions.

Maybe explain in a little more detail why you are unclear, I'd be happy to help explain.

Answer 2

They're generally used to limit variable scope and guaranteeing that you won't pollute your surrounding scope(s).

Answer 3

One of the most common uses of function wrappers is to maintain or lock in that function's context. For example, if you have some object and you want to use one of it's method's as the onclick handler for a given element:

someElement.onclick = someObject.someMethod;

If someObject.someMethod makes any references to this, instead of this pointing to someObject it will instead point to someElement because the context has changed. By wrapping the someObject.someMethod

someElement.onclick = function() { someObject.someMethod() };

you are still executing someMethod as a method of someObject rather than as a method of someElement.

However, if the event handler method never makes any references to this, then a wrapper isn't needed.

From the example code that you posted, if you just did

$(callingImg)[0].setAttribute("onclick", removeChildren(this));

removeChildren(this) would be executed immediately and it's return value would be assigned as the onclick handler.

---

Here's some sample code to illustrate what's happening

var FakeElement = function() {
    this.name    = "FakeElement";
    this.onclick = function() {};
};

var FakeEventHandler = function() {
    this.name = "FakeHandlerObject";
    this.clickHandler = function() {
        console.log("`this` = ", this.name);
    };
};

var e = new FakeElement(); 
var h = new FakeEventHandler();

// Normal usage, `this` points to instance of `h`
console.info("h.clickHandler();");
h.clickHandler();

// Context of this is changed to `e` instead of `h`
console.info("e.onclick = h.clickHandler;");
e.onclick = h.clickHandler;
e.onclick();

// Wrapped to maintain proper context of `this` within `h`
console.info("e.onclick = function() { h.clickHandler(); };");
e.onclick = function() { h.clickHandler(); };
e.onclick();

// Executed immediately and returns `null` causing an error in `e.onclick();`
console.info("e.onclick = h.clickHandler();");
e.onclick = h.clickHandler();
e.onclick();

Output:

h.clickHandler();
`this` = FakeHandlerObject

e.onclick = h.clickHandler;
`this` = FakeElement

e.onclick = function() { h.clickHandler(); };
`this` = FakeHandlerObject

e.onclick = h.clickHandler();
`this` = FakeHandlerObject

---

As a side note, it looks like you're using jQuery. If that's the case, you can simply do

$($(callingImg)[0]).click(function() {
    removeChildren(this);
});

better still, if there is always one callingImg or you want to apply the same click handler to every callingImg, you can just do

$(callingImg).click(function() {
    removeChildren(this);
});

Answer 4

Actually it should be

$(callingImg)[0].setAttribute("onclick", function(){removeChildren(this);});

and

$(callingImg)[0].setAttribute("onclick", "removeChildren(this)");

First is anonymous function defined inline and will be called after event fires, second is string which needs to be eval'ed, which is slower and evil.

Answer 5

Some of the uses for function wrappers in this case is so you can do multiple statements within a single event or so you have more control of the argument you're passing in.

If you have no required arguments, you can simply put the name of the function to be called in the event binding. Otherwise, you can put an inline function(){} into that space to be executed. I see no reason to put it as a string in the attributes of the elements the way you're doing it.

w/jQuery

$( callingImg ).click( aFunctionPointer );
// or if you need arguments
$( callingImg ).click( function( ){ aFunction( someArg ); } );

w/Prototype

Event.observe( callingImg, 'click', aFunctionPointer );
// or if you need arguments
Event.observe( callingImg, 'click', function( ){ aFunction( someArg ); } );

DON'T mix and match these ways, like this

$( callingImg ).click( aFunction( ) ); // DON'T DO IT

as it will execute aFunction( ) and will use whatever the return value is (unless of course you're returning a function, but I doubt it) as the click event.

Answer 6

$(callingImg)[0].setAttribute("onclick", "function(){removeChildren(this);}");

That makes no sense. It says: on click, define a function, and do nothing with it.

$(callingImg)[0].setAttribute("onclick", "removeChildren(this)");

This will work except on IE. Don't use setAttribute on an HTML document, ever. There are many bugs in setAttribute in IE, affecting various attributes including all event handlers. And in general setAttribute has no advantage over the shorter, easier-to-read DOM Level 1 HTML properties.

Also it's defining code from a string, something which is widely considered bad practice. It's slower, prone to security problems if you start slinging variables into the string, and may break in the future should Content Security Practice.

More usually, you'd use a function literal:

$(callingImg)[0].onclick= function() {
    removeChildren(this);
};

However that $ looks like you're using jQuery, in which case you should use jQuery's own event handling stuff:

$(callingImg).click(function() {
    removeChildren(this);
});