Don’t use this in JavaScript

this JavaScript:

var o = {
    f1: function() {
        console.log('hi');
    },
    f2: function() {
        this.f1();
    }
};

o.f2.prototype.f1 = function() {
    console.log('bye');
}

var k = {
    f1: function() {
        console.log('pfff');
    }
}

new o.f2();
o.f2.apply(k);
o.f2();
var x = o.f2;
x();

There. That’s why I never use the this keyword in JavaScript.
And that’s why I think you should stop using it too.
Can you figure out what’s the output of this code?

If you run this piece of code on Chrome’s or Firebug’s console you will see something like (extracted form Firebug):

bye
pfff
hi
TypeError: this.f1 is not a function

The this keyword references a different object depending on how the function is called.
This could be a very powerful feature if it was not so misleading. When developers use this they expect it to reference one single object – thanks to many years of practicing using such keyword on languages like Java.

What happens there?

new o.f2();: When we call a function with the new keyword JavaScript will implicitly create an object and assign all this references in that function scope to that object, and return that object in the end. It will also create a reference to all of the properties of that function’s prototype in the newly created object.
When we do new o.f2(); we are doing exactly that, so when f2 gets executed it looks for a function called f1 (line 6) that belongs to that object. Since f2’s prototype gets assigned to the created object, that function would be the one that prints bye (line 10).

o.f2.apply(k);: All functions in JavaScript have a method called apply that will let you explicitly override the reference to this keyword during the execution of such function. That’s exactly what we are doing here. When f2 gets executed, this points to k, there fore pfff is logged, since k has a function called f1 that does that (line 14).

o.f2;: That’s the regular and usually expected behavior.

var x = o.f2; x();: We assign a reference to f2 to a variable called x. When we call x there’s no object associated with the call, so this points to nothing. When we try to access the property f1 in an undefined object, we get an error.

And if that’s not enough for you, here’s another example that shows another problem with this:

var object = {
  name: "simple object out here"
};

var anotherObject = {
  object: { name: "simple object in here" },
  p1: this.object.name,
  f1: function () {
    return this.object.name;
  }
};

console.log(anotherObject.p1);
console.log(anotherObject.f1());

This code outputs:

simple object out here
simple object in here

Maybe it’s just me, but I would logically expected it to output:

simple object in here
simple object in here

The thing is: using this in an object scope is not the same as using this in an object’s function scope.

So, please, don’t use this.
Or, use it as little as you can! When working with jQuery you will have to use this inevitably.
And that’s ok! But when writing your own, non-library-interacting code, minimizing the usage of this can make your code way simpler to understand and much less likely to have weird bugs – unless you really understand what all the different contexts this can refer to are. I know I get confused with the this keyword every now and then.

Happy JS-ing!

All the code shown in this post can be found here: https://github.com/luizfar/nothisjs