In Object-Oriented Javascript pass object member method to event handler

Question

In Javascript I have defined an object like this:

function myObject() {
    this.x = 5;
    window.addEventListener("resize", this.resizeHandler);
}

myObject.prototype.doSomething = function() {
    alert(this.x);
}

myObject.prototype.resizeHandler = function() {
    this.doSomething();   // Here occurs error.
}

var obj = new myObject();

However I am running into the error message:

"Uncaught TypeError: undefined is not a function".

Question is "why is that?" Explanation would be great!

"Explanation would be great!" The explanation is that you're passing the function and not the object. Functions themselves are objects and can be passed around and referenced like any other object. Because of this, you could have multiple objects reference the same function, or no object referencing it. There's no such thing as an "owner" object. Because the value of this in a function is generally based on how that function is invoked, you need to invoke it in such a way that you, implicitly or explicitly, "tell" the function what its this value should be. — user1106925
– user1106925, Commented Sep 28, 2014 at 18:57

jcreamer898 · Accepted Answer · 2014-09-28 18:48:19Z

4

You need to make sure that the context of this is correct...

function myObject() {
    this.x = 5;
    window.addEventListener("resize", this.resizeHandler.bind(this));
}

myObject.prototype.doSomething = function() {
    alert(this.x);
}

myObject.prototype.resizeHandler = function() {
    this.doSomething();   // Here occurs error.
}

Here the .bind(this) is used.

The this changes in the function used as an event handler.

answered Sep 28, 2014 at 18:48

jcreamer898

8,1895 gold badges44 silver badges57 bronze badges

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

2 Comments

Bart Over a year ago

Small footnote: #bind is not supported in IE < 9. A polyfill is available here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

jcreamer898 Over a year ago

Thanks, meant to mention that too... :)

Collectives™ on Stack Overflow

In Object-Oriented Javascript pass object member method to event handler

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related