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 <[email protected]> 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 [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> 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 [email protected].
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.
