Wow. Talking about mind-blowing. I read through the dummy article and I will definitely be reading it again tomorrow. And probably the next day, too.
Thank you so much for taking the time to explain and share; I appreciate it! - Daniel --- On Dec 22, 5:18 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote: > In fact, it is a closure, and it works very much like closures in Ruby and > other languages. > > Keep in mind that a JavaScript object is reference counted and remains in > existence as long as there are any references to the object. Once there are > no more references to an object, it becomes available for garbage > collection. > > When you call a function, JavaScript creates a private object for that > particular call of the function. This object has properties for the > function's local variables and arguments. The object is not directly > accessible from JavaScript code, but it obeys the same garbage collection > rules as any other JavaScript object. > > The function call object has one reference added when the function is > entered, and that reference is removed when the function exits. So, in the > typical case where there are no other references to the function call > object, it becomes available for garbage collection at that point. > > However, if any other code holds onto a reference to the function call > object, then the object cannot be garbage collected until all of those > references are removed. Similarly, if you hold a reference to any of the > function's arguments or variables, that is also a reference to the function > call object. So as long as there are any references to the function call > object, all of that function's arguments and local variables are kept > around. > > In the code I posted, the $(...).click(...) call creates a reference to the > inner anonymous function. That function in turn contains a reference to the > "i" variable in the outer function (the "clicker" function). So as long as > the click handler exists that reference to the outer function's function > call object will also exist. Therefore, all of the arguments and local > variables for that function call remain in existence. > > Someone may be able to explain this better, but that's the general idea. > > For more info, here are a couple of articles on JavaScript closures: > > http://www.jibbering.com/faq/faq_notes/closures.html > > http://blog.morrisjohns.com/javascript_closures_for_dummies > > -Mike > > > From: Rabbit > > > Hmm... I didn't realize this until I was falling asleep last > > night, but what you've demonstrated is similar to a closure > > in Ruby, except not. My understanding of what you said is > > something along the lines of... > > > An argument to a method becomes a local variable in that > > method and is _retained_. But, how? I get the feeling that > > when you pass an argument to a method the argument "gets > > stashed away for later," but how is it that the correct value > > is recalled? > > > In other words, the code you presented works (I tested it), > > and I understand that it does, but I don't understand how or why. > > > Can anyone shed some light on this? > > > - Daniel > > > --- > > > On Dec 22, 12:55 am, "Michael Geary" <[EMAIL PROTECTED]> wrote: > > > As an alternative to the other solution you posted, here is how you > > > can do it with code more like the code below: > > > > for(var i = 0; i < 30; i++) > > > clicker( i ); > > > > function clicker( i ) { > > > jQuery('#day_' + i).click(function() { > > > console.log('i is ' + i); > > > jQuery('#day_' + i + '_modal').jqmShow(); > > > }); > > > > } > > > > As you can see, all I changed was to put your code inside a > > function > > > and call that function 30 times. > > > > Why did your original code show "i is 30" for each element? Because > > > there is only a single variable "i", and when you call console.log > > > it's using the current value of "i" - not the value that "i" had at > > > the time you added the click event. > > > > By moving this code into a function, a new variable "i" is created > > > each time the function is called. You no longer have all the code > > > sharing a single variable - each instance of the function > > gets its own. > > > > -Mike > > > > > From: Rabbit > > > > > The following code: > > > > > for(var i = 0; i < 30; i++) { > > > > jQuery('#day_' + i).click(function() { > > > > console.log('i is ' + i); > > > > jQuery('#day_' + i + '_modal').jqmShow(); > > > > }); > > > > } > > > > > Runs, but always reports "i is 30". > > > > > Now, I understand why it does that, but why doesn't the jqmShow > > > > method work? It appears as though the code that "gets > > executed" is > > > > dynamic. > > > > In other words, when the click event occurs JavaScript > > looks up the > > > > code as it was at the end of its execution, when variable > > i is 30, > > > > instead of "remembering" that at one point it was something else. > > > > > Did that make sense? > > > > > Any ideas how to get around this without typing in all 30 click > > > > events?
