Thank you for the replies. I thought I knew Javascript until just recently
when I started using jQuery, and things started to behave differently than
I'm used to.
So let me see if I understand this...
var MyClass = function(selector)
{
this.hello = 'Hello World!';}
So, "this" is equal to "window"? If so, what is the difference between the
code above and:
var MyClass = function(selector)
{
window.hello = 'Hello World!';}
My goal is use "this" as the instantiated object, not just a reference to
the class itself. If I were to call the onClick function *without* the event
triggering it, it would behave as expected -- "this" always means the
instantiated object.
Is there a way to bind (as in, jQuery#bind()) an event listener without
changing the meaning of "this"? Is this how I would do that?
$myInstance = new MyClass();
$('#clickme').click(function() {
MyClass.call($myInstance);
});
How do I tell it to call the onClick method?
-Hector
On Mon, Nov 10, 2008 at 7:18 PM, RobG <[EMAIL PROTECTED]> wrote:
>
>
>
> 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
