7

Consider the following Javascript class:

function ClassA() {
 this.someVariable = someValue;
 this.myHandler = function(){
   // I WANT TO CALL InnerFunction
   this.innerFunction();
 };

 this.innerFunction = function(){
   // do something that accesses/manipulates someVariable
 };

 this.hookUp = function(id){
   document.getElementById(id).onclick = this.myHandler;
 };
};
...
...
var button = document.createElement('button');
button.setAttribute('id','mybuttonid');
// append button to the document
...
...
var x = new ClassA();
x.hookUp('mybuttonid');

When I click on the button, the handler executes, however, 'this' now refers to the button element instead of the ClassA object, so it cannot resolve innerFunction().

What i need to have is a way to indicate to the handler that the context of this is the instance of ClassA (similar to $.ajax({context: this....}) where you can use 'this' in the .done() or .error() handlers), or a way to pass a reference to the instance to the handler without making the handler execute at instantiation time. For example if I try to pass 'this' as a praremter to myHandler (myHandler=function(ref){}, and then change : document.getElementById(id).onclick = this.myHandler(this);) But as you add parameters to myHandler, the function is executed at class instantiation time instead of at click time.

Any help will be greatly appreciated.

adaj21
  • 543
  • 3
  • 11
  • 25
  • Instead of `this.someVariable` try just using `var someVariable`. `someVariable` will only be available within the scope of the function, so shouldn't be any need for `this`. Also there's no such thing as classes in JavaScript, so your idea of using `this` might be misguided. – Ian Walker-Sperber Oct 27 '13 at 22:04
  • Thanks.. perhaps I was not very clear, my main problem is accessing innerFunction(). I am trying to write code that resembles OO so it would be easier to understand and maintain, at least for me :) . – adaj21 Oct 27 '13 at 23:50

3 Answers3

5

Replace...

this.myHandler = function(){
    this.innerFunction();
};

... with ...

var self = this;
this.myHandler = function() {   
    self.innerFunction();
};

See this article by Crockford. Cite:

By convention, we make a private that variable. This is used to make the object available to the private methods. This is a workaround for an error in the ECMAScript Language Specification which causes this to be set incorrectly for inner functions.

See also What does 'var that = this;' mean in JavaScript?

Nils Lindemann
  • 1,146
  • 1
  • 16
  • 26
2

Like you already discovered, the value of this depends on how the method is called. Thus, it can be confusing when using this within event handlers attached to DOM elements.

Instead, when adding handlers, use an an anonymous method along with a variable within a closure.

For example, change your hookup function to be:

this.hookUp = function(id) {
    var _this = this;
    document.getElementById(id).onclick = function() {
      _this.innerFunction();
    }
}

Notice that you no longer depend on this from within the onclick handler and thus avoid the problem. Once you're in innerFunction, you can continue to use this as you normally would, as it now correctly points to the correct object.

For a deeper explanation on how this works in functions, MDN has a nice article about the this keyword.

zastrowm
  • 8,017
  • 3
  • 43
  • 63
-1

this is a commonly solved using what's called 'Proxy Pattern'.

I think this will help (-!

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#proxypatternjquery

user1566994
  • 304
  • 2
  • 9