Variable scope and closure inside javascript template

Question

I am writing a jQuery plugin and I am writing it in a standard way not related to jQuery, mainly to ensure portability and extensibility.

I am having problems accessing variables that were declared in a function when accessing a prototype.

Perhaps this model is very wrong with me, but I hope that someone can indicate the correct way to achieve my goal, namely to create several instances of the same class.

My problem occurs when I try to close the window, I get the error "this.auga is undefined". When I create a close button (inside the build window method), I attached a click event .click(this.hide)- this is another method in the function prototype. Also my event .resizedoes not work, because the method .centerAugauses my property this.win. Getting an error this.win is undefined.

Why is the method .showspecific this.auga, but the method .hideremains undefined? I understand that I am .showaccessing the method from the instance itself, but why do other methods also not have access to the instance?

This is not a "do this job". I am writing this plugin to become more familiar with JavaScript. Therefore, if anyone has an understanding, I am all ears.

Here is a link to an example:
http://jsfiddle.net/G26aM/16/

Answer 1

In the jQuery callback, the "this" variable will point to the element that generated the event, even if the callback function is in your object.

To get around this at the beginning of your object, do:

var self = this;

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