Maybe what I am looking for is something similar to this:
http://www.prototypejs.org/api/function/bind
-Hector
On Mon, Nov 10, 2008 at 7:45 PM, Hector Virgen <[EMAIL PROTECTED]> wrote:
> 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
>
>
>
