How to reference object instance from event handler

Question

In the code below, is there a better way to reference the object instance from handleClick() than pulling it in as a global?

var Widget = function() {
  this.property = 'value';
  this.bindEvents();
}

Widget.prototype = {

  bindEvents: function() {
    $('button').on('click', this.handleClick);
  },

  handleClick: function() {
    var self = window.Widget;

    console.log(self.property);
  }
}

window.Widget = new Widget();

This question asks the same thing, and the (non-accepted) answer is to pass a callback to $.on() and call the handler from there, passing in the instance as a parameter like this:

bindEvents: function() {
  var self = this;

  $('button').on('click', function() {
    self.handleClick.apply(self);
  });
}

Is this technique of passing the instance around really the right way to do it, or is there still a preferred way besides the two I've shown?

Look at all those questions: stackoverflow.com/q/18210083/218196, stackoverflow.com/q/5904050/218196, stackoverflow.com/q/737454/218196, stackoverflow.com/q/520019/218196. — Felix Kling
– Felix Kling, Commented Sep 3, 2013 at 19:43
Thanks for the dup links - likely wouldn't have posted my question if I knew to search for $.proxy. Will leave it up though unless there are objections - some good answers and might help someone to see multiple techniques referenced in the code. — cantera
– cantera, Commented Sep 3, 2013 at 19:56

adeneo · Accepted Answer · 2013-09-03 19:46:16Z

5

The object can be passed as eventData to on(), like so:

var Widget = function () {
    this.property = 'value';
    this.bindEvents();
}

Widget.prototype = {

    bindEvents: function () {
        $('button').on('click', {o: this}, this.handleClick);
    },

    handleClick: function (e) {
        var widgt = e.data.o;
        console.log(widgt.property);
    }
}

window.Widget = new Widget();

FIDDLE

This keeps the scope of the event handler as it should be.

edited Sep 3, 2013 at 19:46

answered Sep 3, 2013 at 19:39

adeneo

319k29 gold badges409 silver badges392 bronze badges

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

3 Comments

cantera Over a year ago

Very interesting approach. Helps me realize that calling the handler within a callback has the advantage of not having to pass the event object around.

adeneo Over a year ago

@cantera25 - indeed, and this would still be the clicked button inside the event handler, and not the Widget object.

rassoh Over a year ago

Another advantage of this method is that you can easily unbind the event listener later with $('button').off('click', this.handleClick);

kamituel · Accepted Answer · 2013-09-03 19:42:34Z

1

You could use bind():

bindEvents: function() {
  $('button').on('click', function() {
    this.handleClick();
  }.bind(this)); 
}

But when it comes to IE, that would work only in IE >= 9.

Edit: in legacy IE, you could use, as suggested by @Kevin B in the comment, jQuery's $.proxy():

bindEvents: function() {
  $('button').on('click', $.proxy(function() {
    this.handleClick();
  }, this)); 
}

edited Sep 3, 2013 at 19:42

answered Sep 3, 2013 at 19:37

kamituel

36.1k6 gold badges86 silver badges101 bronze badges

8 Comments

Kevin B Over a year ago

In IE, you can use jQuery's version of .bind: $.proxy()

cantera Over a year ago

@kamituel - thanks, is there any advantage to using .bind() vs. the second approach I showed in my question?

Felix Kling Over a year ago

@cantera25: Besides being more concise, no.

kamituel Over a year ago

@FelixKling - wouldn't bind() be a little bit faster? (no reaching to the outer scope)

kamituel Over a year ago

I'll answer myself: this SO answer explains why bind() tends to be slower.

|

Paul Grime · Accepted Answer · 2013-09-03 19:39:40Z

0

As @kamituel says, bind can be used:

Widget.prototype = {
  bindEvents: function() {
    $('button').on('click', this.handleClick.bind(this));
  },
  handleClick: function() {
    console.log(this.property);
  }
}

answered Sep 3, 2013 at 19:39

Paul Grime

15.1k4 gold badges39 silver badges59 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:05:11Z

0

The specified technique is called closure, and it is in common use. However, sometimes it is important to pay attention not to cause memory leaks. You can read more about closure here:

How do JavaScript closures work?

and about memory leaks related to closures, here:

Memory leak risk in JavaScript closures

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Sep 3, 2013 at 19:46

Ilan

6646 silver badges14 bronze badges

Comments

Corbie · Accepted Answer · 2018-09-05 08:01:57Z

The best way to preserve this are lambda functions:

$('button').on('click', () => this.handleClick());

or if you would like to keep the reference to the event:

$('button').on('click', (event) => this.handleClick(event));

The special thing about lambda functions is that you don't define another function in a (potentially different) context. The lambda term is just an instruction and therefore part of the object it was defined in - in your case the instance created by window.Widget = new Widget().

Collectives™ on Stack Overflow

How to reference object instance from event handler

5 Answers 5

3 Comments

8 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

8 Comments

Comments

Comments

Comments

Linked

Related