Forum Moderators: open
For instance if I do this
var foo = 123;
var bar = function(){
alert(foo);
}
bar();
But what happens if I do this:
var foo = 123;
var bar = function(){
alert(foo+111);
}
bar();
Okay, I think it was a piece of cake until now, but this is one is puzzling me:
var foo = 123;
var bar = function(){
alert(foo);
}
foo += 111;
bar();
Actually the question is, when and how the nameless functions are interpreted, when the variables within are evaluated?
If you can answer the question above easily, can you explain this as well (similar problem, but more likely to be happen in real life)?
for (var foo=1; foo<10; foo++) {
document.getElementById("something_"+foo).onclick = function(){
alert(foo);
}
} 
123
234
234
In the first instance javascript does not make difference in definition and implementation? But anyway, What you say is, whatever variable is referenced in the implementation of a nameless function, it is always evaluated, so the value returned will always be the current one? So for the last 'question' the answer is 10 for each of the 10 elements?
If that so, how to go around this? Does a
var localVariable = globalVariable;helps? I guess not, because there's no difference in passing a variable to alert and assigning a variable to an another, they would be executed in the same way, no?
// foo, abc, and bar have 'Global' scope because
// they are declared outside of function or object
var foo = 500;
var abc = 678;
var bar = function() {
// This abc does not have 'Global' scope.
// It is only defined within this function
// because we've used 'var' to create a new
// variable within this scope
var abc = 123;
alert(foo); // This will alert global foo's value
alert(abc); // This will always alert 123
}
foo += 321; // global foo = 821
bar(); // alert(821), alert(123)
alert(abc); // alert(678)
Actually the question is, when and how the nameless functions are interpreted, when the variables within are evaluated?
for (var foo=1; foo<10; foo++) {
document.getElementById("something_"+foo).onclick = function(){
alert(foo); // This will always alert 10
};
}
In the example above, you're going to be alerting the value of the global variable foo. Whatever value was last stored in foo is what we'll be alerted (in your example, it's going to be 10).
You might be interested in reading up on JavaScript 'closures'. I suspect that's where your line of questioning is headed.
Closures is indeed something I have been looking for, as I already experienced this 'strange' behavior sometimes, and I could not explain why it works sometimes and why it does not in other cases. So it is not the anonymous function which has a different understanding or interpretation, but the way they are threated. If I make closure by using a "function factory", I get the 'strange' behavior.
Actually whenever I assign a function to a variable, I make a closure, but it's only efficient when it's done in a function?
So my last question would need to be rewritten, the onclick should not get the value assigned straight anymore, but from the return value of a function?
Thanks for the help anyway!
<button id="something_1">Press 1</button><br>
<button id="something_2">Press 2</button><br>
<button id="something_3">Press 3</button><br>
<button id="something_4">Press 4</button><br>
<button id="something_5">Press 5</button><br>
<button id="something_6">Press 6</button><br>
<button id="something_7">Press 7</button><br>
<button id="something_8">Press 8</button><br>
<button id="something_9">Press 9</button><br>
<button id="something_10">Press 10</button><br>
<script type="text/javascript">
function setSomethingsOnclick(foo)
{
return function() {
alert(foo)
}
}
for (var foo = 1; foo <= 10; foo++) {
document.getElementById("something_" + foo).onclick = setSomethingsOnclick(foo)
}
</script>
Thanks a lot!
[edit]Bad English ;-)[/edit]
Yes, the example shows closure by using a "function factory" as you mentioned. It creates a new function for each iteration of the loop and makes it the new handler for the onclick event for each button individually.
Actually whenever I assign a function to a variable, I make a closure, but it's only efficient when it's done in a function?
I wouldn't say that this case is efficient, but it is a somewhat unrealistic case too. Real world applications will likely use more of an object and prototype approach as displayed in the Mozilla/Gecko documentation link earlier. The "function assignment" part of it is going to set the variables and the methods (prototypes) can be defined once and "reused", so to speak.
So my last question would need to be rewritten, the onclick should not get the value assigned straight anymore, but from the return value of a function?
Yes :)
