Where the f**k is this pointing at?

For developers not using javascript as their main language this is a very very very common question. Sadly there is no single answer to this :P

I think the reason is that in class based languages this always points to the current object while in javascript it’s like a placeholder that can be replaced with any object.

What affects where this is actually pointing to?

“strict mode”, call and apply, bind, callbacks of event listeners, new operator, DOM event handler, In-line event handler, I might be missing some other obscure javascript way but these are the main ones.

The event listener pitfall

Take a look at this code:

You might be surprised that console.log will print the target DOM node instead of the LikeButton function. That’s because listeners are bound to the target DOM node that triggers the event. If you click on <i class=”icon-class”/> then this will point to that DOM element. That’s the behavior by default. It’s how javascript works and if you want a different this you can change it by using bind, call or apply.

The function constructor pitfall

Calling a function like LikeFunction won’t create a new this BUT creating a new LikeFunction will create a new this. It results that the new operator creates a new object (like when you write {}) and points this to this brand new object.

It isn’t any object, it’s an object created based on the LikeButton.prototype object. So if you didn’t change the prototype of LikeButton (like in this case) it will create that object based on the Function.prototype because prototype chain but that’s out of the scope of this article.

Ok, but where this points to when a function is used as function constructor? It depends on the mode: in quirks mode points to window (global in NodeJS) while in strict mode (recommended) this is set to undefined.

As an object method

This is easy: this will point to the object holding the method.

Bind, Apply and Call to the rescue

Maybe you have seen code like: this.handleClick.bind(this). It doesn’t make much sense to people coming from class based languages when this doesn’t change but: Did you remember we said events are automatically bind to the target of the event? Well, I WANT MY THIS POINTING BACK TO MY CLASS / FUNCTION CONSTRUCTOR!!!

Let’s see an ES2015 example using classes (pretty much syntactic sugar for function constructors):

Bind creates a completely new function replacing this with the first parameter of bind. Because of this we need to save the new function to be able to remove the event later.

Apply and Call executes a given function using a custom object.

Call and apply allow borrow methods from other prototypes (a kind of classes) and use them in another object.

Arrow functions. Yay!

Arrow functions are a special case. You can’t change where this points to inside an arrow function. In other words:

Using bind with an arrow function will throw a syntax error while using call and apply won’t change the this pointer.

Final thoughts

I’ve tried to point out the most common wrong assumptions that people coming from class based languages makes about javascript this keyword and briefly explain how this actually works in javascript.

A complete guide of all the this scenarios can be checked here https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this