jQuery: How to pass object context when object method called as callback?

Question

I have an object:

var Person = function(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHello = function() {
    console.log("Hello" + this.name + ", " + this.age);
}
var sam = new Person("Sam", 31);

I want to call Person.sayHello as onclick callback and I found out that I can do it with bind method.

$("#button").on("click", Person.sayHello.bind(sam));

Maybe there is more generic solution for it or some specific approach for jQuery to solve this problem at jQuery?

I need to add one note. I can have multiple instances of Person class and I want to make click to work for all of them. I thought about some loop over all Person instances and binding them to callback.

@vinayakj I will add it. I can create a lot of person instaces. — Viacheslav Kondratiuk
– Viacheslav Kondratiuk, Commented Nov 4, 2015 at 21:06
@vinayakj (a) that will call it immediately, instead of binding it as an event handler for later (b) it will only bind the function, without the context of the calling object. — Paul Roub
– Paul Roub, Commented Nov 4, 2015 at 21:06
@vinayakj then (b) still applies: codepen.io/paulroub/pen/MaqeMV (note "Hello, undefined" result) — Paul Roub
– Paul Roub, Commented Nov 4, 2015 at 21:09
bind() is about the best way to do it. you could use an anon+closure, but usually bind() solutions are simpler and more re-usable. — dandavis
– dandavis, Commented Nov 4, 2015 at 21:11
@vinayakj I thought about iterating over all Persons and put them into bind — Viacheslav Kondratiuk
– Viacheslav Kondratiuk, Commented Nov 4, 2015 at 21:12

Community · Accepted Answer · 2017-05-23 10:27:11Z

1

Since you're using jQuery, you can use the jQuery.proxy() method, which is specifically made for attaching event handlers and keeps this intact. So, something like:

$('#button').on('click', $.proxy(sam, 'sayHello'));

However, if you're going to loop through a bunch on a single button click, you don't even need to worry about all that.

var sam = new Person("Sam", 31);
var bob = new Person("Bob", 32);
var pat = new Person("Pat", 33);
var people = [sam,bob,pat];
$('#button').on('click', function () {
    people.forEach(function (person) {
        person.sayHello();
    });
});

That assumes a relatively recent browser that supports Array.prototype.forEach. Basically, those People objects already know what they're doing.

If you need to support older browsers change that forEach to:

$.each(people, function (i, person) {
    person.sayHello();
});

Thanks to @dandavis for the tip.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Nov 4, 2015 at 21:20

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

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

1 Comment

dandavis Over a year ago

you can use $.each and change the callback parameters to (i, person) to ensure IE8 compat...

Collectives™ on Stack Overflow

jQuery: How to pass object context when object method called as callback?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related