Hi,

> var th = this;
> (function(){
>     var ids = 'container maindiv';
>     $w(ids).each(function(id){ th[id] = $(id); });
>  }).defer();

Yikes.

> My understanding of this is that it's creating an array of the
> elements wtih the ids of container and maindiv and then appling the
> function(id) to each element.  It's the contents of that function
> (th[id] = $(id);}) that doesn't make sense to me.

That's understandable, it's...densely written.

Summary:  Basically that code schedules these two statements (in
effect) to run the next time the JavaScript interpreter is idle (which
will be very quickly, usually, but not right away):

    this.container = $('container');
    this.maindiv = $('maindiv');

That's it.  Really.  The reason the author deferred execution was
probably that he/she wanted to give the browser time to get those
elements set up in the DOM, so I'm guessing that the code above the
code you quoted is creating those elements in some way.

Peeling back the layers:

1. There are two anonymous functions defined in that code, the outer
one that's deferred and the inner one that's used with each().
They're both closures.

2. The author wants to use the current value of 'this' within the
inner closure (what you called "function(id)"), which is why they've
done this:

> var th = this;

Closures get access to all parameters and local variables in scope
where they're defined, so it will have access to the 'th' variable,
whereas 'this' would not work within the closure unless the author
called it differently.

3. The inner closure:

> function(id){ th[id] = $(id); }

...takes a string 'id' parameter and creates a property with that name
on the 'th' object (which, again, it gets because it's a closure),
where the property points to the result of looking up that element by
the given id.  The array-like notation "th[id]" is a way of using the
*value* of the string variable 'id' as the name of the property.  To
illustrate that notation, here's some unrelated code:  These two
blocks of code have the same effect, adding or setting a property
called 'thingy' on the object 'myobject':

Block 1:  Using a literal property name:
    myobject.thingy = 'frog';

Block 2:  Using a property name from a variable:
    var x = 'thingy';
    myobject[x] = 'frog';

4. You've already figured out the $w() thing so I won't go into it.

5. The defer() bit tacked onto the outer closure:

> (function(){
>     /* ... */
>  }).defer();

...is what sets this up to run later.  It's basically
window.setTimeout with a really, really short timeout.  It'll probably
run almost immediately after whatever function sets this up
terminates.

I couldn't tell if it was the closures that were throwing you, but if
so:
http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html

> $('mainlink').observe('click', (function(event) { event.stop();
> this.switchMain(); }).bindAsEventListener(this));
>
> What confuses me with this one is the last part
> bindAsEventListener(this).  I've read the bind and bindAsEventListener
> pages on the prototype api but it's very confusing for me.

Essentially it's about making sure 'this' is correct when the event
triggers the function.  Here are some further references that might
help a bit:
http://blog.niftysnippets.org/2008/04/you-must-remember-this.html
http://www.alistapart.com/articles/getoutbindingsituations

HTH,
--
T.J. Crowder
tj / crowder software / com

On Sep 10, 10:23 pm, geoff <[EMAIL PROTECTED]> wrote:
> I've been trying to modify a script I found that uses prototype.  I
> have been doing a lot of reading on the prototype web site and
> although I'm learning some things there is quite a bit that is
> confusing.  I'm trying to understand what these lines of code do.  Can
> anyone explain?  Thanks.
>
> var th = this;
> (function(){
>     var ids = 'container maindiv';
>     $w(ids).each(function(id){ th[id] = $(id); });
>  }).defer();
>
> My understanding of this is that it's creating an array of the
> elements wtih the ids of container and maindiv and then appling the
> function(id) to each element.  It's the contents of that function
> (th[id] = $(id);}) that doesn't make sense to me.  The other line I'm
> struggling to understand is this.
>
> $('mainlink').observe('click', (function(event) { event.stop();
> this.switchMain(); }).bindAsEventListener(this));
>
> What confuses me with this one is the last part
> bindAsEventListener(this).  I've read the bind and bindAsEventListener
> pages on the prototype api but it's very confusing for me.
>
> Thanks.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to