Is it better to bind this or use a variable? [closed]

Answer 1

None of them, because both create anonymous functions that you can never remove later.

var scope = this;
var handler = function () {
  scope.emit({
    type: "load",
    asset: asset
  });
};

asset.addEventListener("load", handler, false);

Answer 2

It really depends on a number of factors. Here are a few considerations:

• Historically, functions created from .bind() have been slower.

• The bound this can't change its value, while the variable can. (Guessing you expect it to not change here.)

• You'll be losing the element reference, though you can still get it via event.currentTarget.

---

One other alternative to consider is to make your object implement the Event Listener interface. That will let you pass the object itself as the handler, and will invoke your implementation of the handleEvent() method that you provide.

Then the this value will automatically be your object.

So if your this is an object that comes from a constructor, you could do this:

function MyCtor() {
    // your constructor
}

// This implements the `Event Listener` interface
MyCtor.prototype.handleEvent = function(event) {
          // ------v----should be "load"
    return this[event.type](event)
};

// This is the `load` handler
MyCtor.prototype.load = function(event) {
    this.emit({
      type: "load",
      asset: event.currentTarget
    });
};

---

And then bind the handler like this:

asset.addEventListener("load", this, false);

---

Now your value of this in the handle event will be your object so you can call its other methods, and neither .bind nor a closure variable were needed.

Answer 3

I feel that the second option is better, just to prevent any confusion. The usage of this has been the problem of many a JavaScript problem, so when you can avoid it you should in my opinion. By the way, this is also done in libraries like Knockout.

If you'd like to know more about the this keyword, this is a nice explanation of the various different values this can have in different contexts: http://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

Answer 4

The second option is compatible with more browsers. The bind() function is not supported by IE 8 and below, if that matters to you.

Mozilla's page on bind has a pollyfill for the bind function. In my experience it's usually a bad idea to add to the prototype of builtin objects. So the second option is "better" - just make sure to use a descriptive variable name instead of "that" or "scope". Using a common name can get confusing, especially when you add more functions.