sasuke said:
Compare this script:
=====================================================
<span id='da'>aaaaaaaaaaaaaa</span>
<span id='db'>bbbbbbbbbbbbbb</span>
<span id='dc'>cccccccccccccc</span>
<script type='text/javascript'>
function TheFunction() { alert('a') }
document.getElementById('da').onmouseover = TheFunction
function TheFunction() { alert('b') }
document.getElementById('db').onmouseover = TheFunction
function TheFunction() { alert('c') }
document.getElementById('dc').onmouseover = TheFunction
</script>
=====================================================
with this script:
=====================================================
<span id='da'>aaaaaaaaaaaaaa</span>
<span id='db'>bbbbbbbbbbbbbb</span>
<span id='dc'>cccccccccccccc</span>
<script type='text/javascript'>
var TheFunction = function() { alert('a') }
document.getElementById('da').onmouseover = TheFunction
var TheFunction = function() { alert('b') }
document.getElementById('db').onmouseover = TheFunction
var TheFunction = function() { alert('c') }
document.getElementById('dc').onmouseover = TheFunction
</script>
=====================================================
They are different in effect [in IE7 and FF2 at least]
Yes, the two scripts are different in the sense that the one which
uses the 'var' keyword for declaring functions ends up creating three
different functions which alert 'a', 'b' and 'c' respectively, while
the one which doesn't use 'var' creates only a single function which
is overwritten twice.
I have always been confused by the terminology, but I guess one of the
forms is called function definition and the other is called function
declaration, though the exact differences between those two have
always been fuzzy to me.
What the both of you apparently overlook is that
var f = function ...
and
function f...
differ significantly in the regard of evaluation order.
There is only one important rule to apply here: variable instantiation comes
*before* execution. *But* the term "variable instantiation" is not to be
confused with "variable initialization".
That means in all instances `f' is instantiated before execution, however
only in the second instance it is declared as a reference to a Function
object upon variable instantiation. Accordingly, in the first instance it
is declared having the `undefined' value upon variable instantiation and
only when execution reached that line, is assigned the Function object
reference.
Getting back with the example given before mine, now with line numbers to
ease understanding:
1 function TheFunction() { alert('a') }
2 document.getElementById('da').onmouseover = TheFunction
3 function TheFunction() { alert('b') }
4 document.getElementById('db').onmouseover = TheFunction
5 function TheFunction() { alert('c') }
6 document.getElementById('dc').onmouseover = TheFunction
What essentially happens is:
0. Split the code into parsing tokens.
1. Find a function declaration in line 1. Create a new Function object
and assign a reference to it to the `TheFunction' property of the
Variable Object.
2. Find a function declaration in line 3. Create a *new* Function object
and assign a reference to it to the `TheFunction' property of the
Variable Object.
3. Find a function declaration in line 5. Create a *new* Function object
and assign a reference to it to the `TheFunction' property of the
Variable Object.
4. No more declarations found. Execute line 2:
document.getElementById('da').onmouseover = TheFunction
Assign a reference to the object `TheFunction' *now* refers to to
the `onmouseover' property of the object that is referred to by the
return value of document.getElementById('da').
5. Execute line 3 (as automatic semicolon insertion ends the statement
in line 2):
document.getElementById('db').onmouseover = TheFunction
Assign a reference to the object `TheFunction' *now* refers to to
the `onmouseover' property of the object that is referred to by the
return value of document.getElementById('da'). That would be the
*same* Function object as the value of `TheFunction' was not altered
in between.
6.-8. and so on.
As for the second example:
1 var TheFunction = function() { alert('a') }
2 document.getElementById('da').onmouseover = TheFunction
3 var TheFunction = function() { alert('b') }
4 document.getElementById('db').onmouseover = TheFunction
5 var TheFunction = function() { alert('c') }
6 document.getElementById('dc').onmouseover = TheFunction
What essentially happens is:
0. Split the code into parsing tokens.
1. Find a variable declaration in line 1. Instantiate the variable
`TheFunction' (as the `TheFunction' property of the Variable object)
as follows:
var TheFunction = undefined;
2. Find `TheFunction' declared in line 3. Execute
var TheFunction = undefined;
3. Find `Thefunction' declared in line 5. Execute
var TheFunction = undefined;
4. Execute line 1, evaluate the right-hand operand, create a new Function
object and assign the reference to it to `TheFunction' (overwriting the
previously assigned `undefined' value):
var TheFunction = function() { alert('a') }
5. Execute line 2:
document.getElementById('da').onmouseover = TheFunction;
document.getElementById('da') is called, and as it would return a
reference to a (host) DOM element object, its `onmouseover' property
would be assigned a reference to the object that `TheFunction' refers to.
6. Execute line 3, evaluate the right-hand operand, create a *new* Function
object and assign the reference to *that* to `TheFunction' (overwriting
the previously assigned value, allowing the previously referred Function
object to be garbage-collected since nothing refers to it anymore):
var TheFunction = function() { alert('b') }
7. Execute line 4:
document.getElementById('db').onmouseover = TheFunction
document.getElementById('da') is called, and as it would return a
reference to a (host) DOM element object, the `onmouseover' property
would be assigned a reference to the *other* object that `TheFunction'
*now* refers to.
8.+9. and so on.
See also ECMAScript Edition 3 Final, 10.1.3 (again).
HTH
PointedEars
