1

What are the pros and cons of using a reference object versus using JavaScript's .bind()? Are there some cases (real world or theoretical) where one might be optimal?

Here is a simple example...

var obj = {
    message : "Hello World"
    ,buttonElt : document.getElementById('myButton')
    ,init : function(){

       // A --- Using a reference object so the function can reference this obj
       var o = this;
       buttonElt.addEventListener("click", function(){
           alert(o.message);
       }, false);

       // B --- using .bind to send this obj
       buttonElt.addEventListener("click", function(){
           alert(this.message);
       }.bind(this), false);      
    }
}
obj.init();
Luke
  • 18,811
  • 16
  • 99
  • 115
  • You'd want to use the object reference when `.bind()` isn't available or when the implementation of `.bind()` has performance issues (which wouldn't be the case for a `click` handler). – cookie monster Sep 19 '14 at 16:37
  • 1
    There could be third party API's which expose some object via `this` and it's only way to access it. In that case you wouldn't use `.bind`. In case of event handlers, you can get the current element via `event.currentTarget`, so it's less of an issue there. – Felix Kling Sep 19 '14 at 16:37
  • 1
    ...for your specific case, I think a nicer alternative is to make your object implement the *EventListener* interface. That way you automatically get `this` set to your object, and still have access to the element via `event.currentTarget` as Felix mentioned. – cookie monster Sep 19 '14 at 16:39
  • When `this` has another and useful meaning in the callback (like it points to the element that triggered the event in a click handler), then you may not want to replace it with something else. Of when you can do one `var o = this` that a whole bunch of other callbacks can use. – jfriend00 Sep 19 '14 at 16:50
  • Thanks. @cookiemonster - what are the potential performance issues? Does option B do more processing than A? Also, I'm not sure I follow your second comment. – Luke Sep 19 '14 at 16:56
  • Some implementations have historically shown reduced performance when invoking a function created using `.bind()` compared to one that simply closes over the object. I don't know if that's still the case, but it would only be a relevant issue in uniquely performance critical applications. I'll give a demo of my second comment in a moment... – cookie monster Sep 19 '14 at 19:08
  • [Here's a demo](http://jsfiddle.net/6zupkaew/) of the event listener interface. Basically, if you have an object that includes a method named `handleEvent`, then it succeeds in fully implementing the *EventListener* interface, which means you can pass the object itself to `addEventListener` instead of a function, like `this.buttonElt.addEventListener("click", this, false);`. When the `click` event occurs on the `buttonElt` element, the `handleEvent` method will be invoked. In that method, the `this` value will be a reference to your object. This is a very nice way to organize an application. – cookie monster Sep 19 '14 at 19:13

0 Answers0