variable scope and closure inside a module pattern javascript instance

Question

I'm writing a jQuery plugin, and I'm writing it in a non-jquery-community-standard way, mainly to maintain portability and extendability.

I'm having some trouble accessing variables that were declared in the function when accessing from the prototype.

Perhaps I have this model very wrong but I hope someone can point out the correct way to achieve my goal, and that is to create Multiple instances of the same class.

My problem occurs when I try to close the window, I get a "this.auga is undefined" error. When I create the close button (inside the build window method) I attached a click event .click(this.hide) - which is another method within the functions prototype. Also my .resize event isn't working because the method .centerAuga utilizes my this.win property. Getting a this.win is undefined error.

Why would the .show method have a defined this.auga, yet the the .hide method remains undefined? I understand I'm accessing the .show method off the instance itself - but why dont the other methods also have access to the instance?

This is not a "Make this work please". I'm writing this plugin to become more familiar with JavaScript. So if anyone has any insight please - I'm all ears.

Here's a link to the example:
http://jsfiddle.net/G26aM/16/

Matthew Manela · Accepted Answer · 2010-07-26 04:20:08Z

4

In a jQuery call back the "this" variable will point to the element that created the event even if the callback function is in your object.

To get around this at the begining of your object do:

var self = this;

And then whenever you want to refer to your object use "self" instead of "this".

answered Jul 26, 2010 at 4:20

Matthew Manela

16.8k3 gold badges67 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chase Wilson Over a year ago

I don't think this is necessarily the problem. I think the issue is having the prototype access the active instance. I'm aware of how to assign "this" in a normal setting, I think the problem is coming from using the prototype methods with the declared instance. What does "this" access within a the prototype?

Matthew Manela Over a year ago

There is nothing wrong with using this in a prototype. It does look like a this reference issue conflicting with jquery. For example you do this: this.win.resize(this.centerAuga). Which means in center Auga "this" will no longer point to your object. But you still use it there to mean that.

Chase Wilson Over a year ago

I hate that you're right, cause I thought i knew what I was doing w. that. jsfiddle.net/G26aM/18 <-- works

Collectives™ on Stack Overflow

variable scope and closure inside a module pattern javascript instance

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related