Function values in JavaScript

Question

nextplease.init = function() {...} is a function with no arguments. I'd expect nextplease.init and function() {nextplease.init();} to behave identically. Is there any possible difference between them (obviously, you can assign something to nextplease.init, but let's exclude that)? In particular, can there be a difference in behavior between window.addEventListener("load", nextplease.init, false); and window.addEventListener("load", function() {nextplease.init();}, false);?

The bug I'm trying to find is described in Objects in JavaScript defined and undefined at the same time (in a FireFox extension) Someone has suggested that using the first form instead of the second might make a difference.

Answer 1

One important difference is the value of the "this" keyword inside the body of the function referenced by nextplease.init.

Assume nextplease is defined as such:

nextplease = {};
nextplease.someCustomProperty = "hello";
nextplease.init = function () { alert(this.someCustomProperty); }

In the first example, the value of "this" would be the DOM object, and the alert would fail:

window.addEventListener("load", nextplease.init, false);     

In the second form, the value of "this" would be the nextplease object, and the alert would say, "hello":

window.addEventListener("load", function() {nextplease.init();}, false);

Reference the MDC documentation:

https://developer.mozilla.org/en/DOM/element.addEventListener