Explanation of this

Forum Moderators: open

Message Too Old, No Replies

Explanation of this

onload

Alternative Future

11:41 am on Feb 12, 2008 (gmt 0)

Greetings to the forum,

I was wondering if someone might be able to explain the following JavaScript to me.


<html>
<head>
<script type="text/javascript">
(function load(){
alert("load");
})();
function onload(){
alert("onload");
}
</script>
</head>
<body onload="onload()"></body>
</html>

The part I do not fully understand is (function load(){do stuff...})();
How does javascript interprerate the brackets ()(); containing the function? Is this javascript attempt at overloading (i know you cant overload with javascript, but just curious to what its doing)? as it is called before the page onload.

TIA,

-Gs

[edited by: Alternative_Future at 11:42 am (utc) on Feb. 12, 2008]

Fotiman

5:23 pm on Feb 12, 2008 (gmt 0)


(function load(){ 
  alert("load"); 
})();

To quote the json2.js [json.org] file:

The '{' operator is subject to a syntactic ambiguity in JavaScript: it can begin a block or an object literal. We wrap the text in parens to eliminate the ambiguity.

In other words, by wrapping the entire function in parens, we guarantee that the entire block will be recognized as a function body instead of an object literal.
Next, the () immediately following it is basically just saying execute this function. For example, suppose you have the following:


function foo() { /* ... */ } 
// Call foo: 
foo(); // Note the parens

Well, foo could instead be a self-instantiating function by moving the parens:


function foo() { /* ... */ }();

In other words, we execute it immediately after defining it. And to remove the ambiguity of block vs. object, wrap the function definition in parens as well:


(function foo() { /* ... */ })();

So in your original example, the load method is going to be called as soon as that JavaScript is parsed (which, in the code you gave, is before the document has finished loading so certain DOM objects wont be ready yet).
Hope that helps.

[edited by: Fotiman at 5:24 pm (utc) on Feb. 12, 2008]

Achernar

5:41 pm on Feb 12, 2008 (gmt 0)

Note that function name has no use in this circumstances.

(function(){var a; ...;})()

This form of code has some advantages. You can haves part of your code and variables totaly hidden from the other javascript code.
In my example, 'a' is a local variable not accessible outside of "function(){}"

You can define sub-function in this function, and use them directly in the code inside function(){}, or in an event set inside this function.

(function(){
var a;
function testSomething(v) {
do something with v;
}
function handleClick() {
some code;
}
a=testSomething(document.getElementBy...);
document.body.addEventListener('onclick',handleClick,false);
})()

Fotiman

8:26 pm on Feb 12, 2008 (gmt 0)

Oops, I meant to cut out that function name. :)

Alternative Future

9:04 am on Feb 13, 2008 (gmt 0)

Thanks so much for the explanation guys appreciated.

fside

11:11 pm on Feb 14, 2008 (gmt 0)

Generally, the use of (function(){ . . } to surround everything else is done to keep everything inside, out of the global namespace. The whole point of this 'new' pattern of scripting is to allow the use of various foreign scripts whose use of the global namespace and global variables you can't accout for. This script is covering both ways. If the browser doesn't support the "()" autorun at the end, then the normal, possibly soon to be deprecated, body onload call will work. Otherwise, BOTH will be called.

The top onload is inside an anonymous function, in other words, and cannot be seen by body onload.

fside

8:22 am on Feb 15, 2008 (gmt 0)

Similar example:

[jqueryjs.googlecode.com...]