Hi,

`this` in Javascript is different from `this` in some other languages:
It's determined entirely by how a function is called, not where or how
a function is defined. That means that whenever you call a function,
if `this` is important within the function, you need to be sure you're
setting it when you make the call. More here[1][2], but basically,
there are two ways to set `this`:

1. Making the function call through a property on an object, e.g.
`foo.bar()`. Within `bar`, `this` will reference `foo`. That's just a
feature of the language.

2. Explicitly using Function#call or Function#apply, which are also
language features (every function object has the properties `call` and
`apply`, which can be used to call the function and explicitly set
what `this` value it should have).

If you don't do either of those things, `this` will be set to the
global object.

Prototype's Enumerable#each function calls your iterator function,
which means that unless you do something to ensure `this` has a
specific value, it will be set to the global object (which is `window`
on browsers):

    var T = Class.create({
        foo: function() {
            ["x"].each(function(value) {
                alert(this === window); // alerts true
            });
        }
    });
    new T().foo();

Fortunately, #each also provides a means of setting `this` -- just
pass in a second argument (see the docs[2]):

    var T = Class.create({
        foo: function() {
            ["x"].each(function(value) {
                alert(this === window); // alerts false
            }, this); // <================= New bit is here
        }
    });
    new T().foo();

[1] http://blog.niftysnippets.org/2008/03/mythical-methods.html
[2] http://blog.niftysnippets.org/2008/04/you-must-remember-this.html
[3] http://api.prototypejs.org/language/enumerable/prototype/each/

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com

On Apr 25, 1:19 pm, sitescriptor <g...@roo.de> wrote:
> i´m trying to give an eventhandler to every "a.dlclose" inside "div.do-
> dlayer". Everthing works fine except that "this.ltoggle" is undefined
> inside "$(this.container).select( 'a.dlclose' ).each(... " !?
> Below the stripped down examplecode.
> Thanks!
>
> ERROR in Firebug:
>  handler is undefined
>  [Break on this error] handler.call(element, event);
>
> HTML:
>                 <div class="do-dlayer" style="border: 1px solid 
> red;">Container
>                         <div style="width:100px;height:100px; border: 1px 
> solid
> blue;">Preview
>                         </div>
>                         <div style="width:300px;height:300px; border: 1px 
> solid
> green;">Layer<a href="#" class="dlclose">close layer</a>
>                         </div>
>                 </div>
>
> JAVASCRIPT:
>         function init_dlayer()
>                 {
>                 $$('div.do-dlayer').each( function(el){ new
> DynamicLayer( el );  } );
>                 }
>
>         var DynamicLayer = Class.create({
>                         container: 0,
>                         preview: 0,
>                         layer: 0,
>                         initialize: function( el )
>                                 {
>                                 this.container = el;
>                                 var parts               = 
> this.container.childElements();
>                                 this.preview    = parts[0];
>                                 this.layer              = parts[1];
>                                 this.ltoggle = this.ltoggle.bind( this );
>                                 this.preview.observe( 'click',  this.ltoggle 
> );
>
>                                 alert( 'DynamicLayer.ltoggle(before):' + 
> this.ltoggle );
>                                 $(this.container).select( 'a.dlclose' ).each(
>                                                 function(elem)
>                                                         {
>                                                         alert( 
> 'DynamicLayer.initialize(close:link)' + this.ltoggle );
>                                                         elem.observe( 
> 'click',  this.ltoggle );
>                                                         } );
>                                 },
>                         ltoggle: function( ev )
>                                 {
>                                 // do something
>                                 Event.stop( ev );
>                                 },
>                         });
>
>         document.observe("dom:loaded", function() {
>                 init_dlayer();
>                 });
>
> HTML:
>                 <div class="do-dlayer" style="border: 1px solid red;">
>                         <div style="width:100px;height:100px; border: 1px 
> solid
> blue;">Preview
>                         </div>
>                         <div style="width:300px;height:300px; border: 1px 
> solid
> green;">Layercontent<a href="#" class="dlclose">close layer</a>
>                         </div>
>                 </div>
>
> --
> 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-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to 
> prototype-scriptaculous+unsubscr...@googlegroups.com.
> For more options, visit this group 
> athttp://groups.google.com/group/prototype-scriptaculous?hl=en.

-- 
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-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to