On Nov 11, 11:17 am, "Hector Virgen" <[EMAIL PROTECTED]> wrote:
> I'm having trouble using "this" in my objects when the method is triggered
> by an event.
The value of a function's this keyword is *always* set by the call, so
use the call to set it to the value you want.
> Here's my basic test class. The lines that do not work as expected are in
> red.
>
> var MyClass = function(selector)
> {
> this.hello = 'Hello World!';
If you call the function as MyClass(...), its this keyword will be the
global/window object, so you have just assigned the string "Hello
World!" to a hello property of the window object. Test it:
alert( window.hello ); // shows 'Hello World!'
> var onClick = function()
> {
> alert('onclick: this = ' + this); // <-- object HTMLInputElement
When a listener is called, it is traditional for its this keyword to
refer to the element that the listener was attached to. The call is
made by the browser, so it calls the function in a way that sets its
this keyword to the element that the listener is attached to. You
can't change that, but you can do something like:
<input ... onclick="MyObject.call( /* the object you want set as
MyObject's this keyword */ );">
> alert(this.hello); // <-- does not work: undefined
It works as designed: the HTML element doesn't have a hello property.
You created the hello variable as a property of the window object.
> otherFunc();}
This creates a closure with the outer function's otherFunc variable so
that when the element is clicked, otherFunc is called. Since the call
is unqualified, otherFunc's this keyword will be the global/window
object.
> var otherFunc = function()
> {
> alert('otherfunc: this = ' + this); // <-- object Window ??
Yes, because of the way otherFunc was called.
> alert(this.hello); // <-- does nto work: undefined}
It does work, just no as you expected.
> $(selector).click(onClick);
> alert('loaded: this = ' + this); // <-- object Object
Nope, window object.
> alert(this.hello); // <-- alerts "Hellow World!"
Yep, it's reporting the value of window.hello as described above.
> };
>
> The way this works is instantiating a new MyClass object
It declares a global variable called MyClass. When the code is
executed, it is assigns a reference to the function object created by
the function expression on the right hand side. There is no
"instatiating", declaring a variable and assigning it a value in one
statement is generally called initialising.
> binds the click event to the selector.
Adds a listener, it doesn't "bind" anything.
> This works fine, but "this" loses its scope, even
> when calling other functions.
A function's this keyword has nothing to do with scope, it is set by
the call, not by the declaration or initialisation.
> To see this in action, check out this page (watch out for the alerts ;)).
>
> Any ideas on how to keep "this" within scope?
Set it to the value you want when you call the function. What do you
expect it to refer to?
--
Rob
