Access an instance variable inside an anonymous function inside prototype method

Question

This is actually a follow up question to my previous question, Access instance variable inside a function in javascript?.

I want to access an instance variable inside an anonymous function inside prototype method.

function MyObject(){

     //Instance variables
     this.handler;

}
//Methods
MyObject.prototype.enableHandler = function(){
    var button = document.getElementById('button');
    button.onclick = function(){
         this.handler();//Is not working
    }
}
var myObject = new MyObject();
myObject.handler = function(){
    alert('Hello World!');
}
myObject.enableHandler();

JSFiddle http://jsfiddle.net/3cmvZ/

The example above was just to clarify how I can access an instance variable inside an anonymous function inside a prototype method. I already know that button.onclick = this.handler works.

Mathias Schwarz · Accepted Answer · 2011-07-04 16:39:49Z

4

The problem is not that the anonymous function is in the prototype, but rather that it is an event handler (which is not invoked as a method).

The problem is that in your onclick handler, the this keywords is bound to the windows object, not to the myObject instance that the prototype is set on. You can store the object in a that variable and create a closure:

function MyObject(){

     //Instance variables
     this.handler;

}
//Methods
MyObject.prototype.enableHandler = function(){
    var button = document.getElementById('button');
    var that = this;
    button.onclick = function(){
         that.handler();//Should be working
    }
}
var myObject = new MyObject();
myObject.handler = function(){
    alert('Hello World!');
}
myObject.enableHandler();

answered Jul 4, 2011 at 16:39

Mathias Schwarz

7,19725 silver badges28 bronze badges

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

2 Comments

einstein Over a year ago

If I change that.handlerwill this.handler also be changed?

Mathias Schwarz Over a year ago

as long as that and this are the same object then yes.

Matthew Abbott · Accepted Answer · 2011-07-04 16:39:01Z

2

this.handler is not in the same scope. You need to declare it as:

MyObject.prototype.enableHandler = function() {
    var button = document.getElementById("button");
    button.onclick = this.handler;
}

As you are simply calling the event directly, you need not wrap it in another function.

Update based on your comment:

MyObject.prototype.enableHandler = function() {
    var button = document.getElementById("button");
    var $this = this;

    button.onclick = function() {
        $this.handler();
    }
}

You need to make a local variable that is in the same scope as the anonymous function.

edited Jul 4, 2011 at 16:39

answered Jul 4, 2011 at 16:33

Matthew Abbott

61.7k9 gold badges108 silver badges131 bronze badges

2 Comments

einstein Over a year ago

Forgot to mention that the example was just to clarify how I can access an instance variable inside an anonymous function inside a prototype method. I already know that button.onclick = this.handler works

einstein Over a year ago

If I change $this.handler will this.handler also be changed?'

Collectives™ on Stack Overflow

Access an instance variable inside an anonymous function inside prototype method

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related