One simple rule, a few exceptions

The one rule to know, is that this is always whatever is before the dot (.) when you call the function.

e.g: dog.bark(). Inside the bark() function, this is going to be the object dog, because that’s what is before the dot.

That’s it.

Let’s explore this in more detail.

What about the global context?!?!

The global execution context, A.K.A. anywhere outside a function, still abides by this rule. It does so in a roundabout way, but it’s obvious once you think about it: doSomething() is exactly the same as window.doSomething(). So what’s before the dot? window, of course!

Note: it’s global instead of window in NodeJs.

Now let’s explore actual exceptions to the rule.

Exception the first: `bind`, `apply` and `call`

bind’s main purpose is to “set” this permanently. So that exception is kind of obvious, and I’ll leave it at that. apply and call both take “thisArg” argument, which will explicitely set this for you. Again a pretty obvious exception.

Exception the second: arrow function

Arrow functions (() => {}) are this new concept in ES6. It’s been a few years so you should probably know about them by now, but one of their main properties is that they’re auto-bound to this when they’re declared. In other words, it’s as if you did:

function myFunction() {
  // ...
}
myFunction = myFunction.bind(this);

Again, this is one of the main reasons why you’d use arrow functions, so it’s not exactly surprising.

Exception the third: strict mode

This one is a little less obvious. Remember when I said that doSomething() and window.doSomething() were the same thing? Well, in strict mode that’s not exactly the case anymore. After all, strict mode is supposed to fix a few weird parts of Javascript, and this special case actually makes a little more sense in strict mode:

doSomething() doesn’t have anything before the dot, so this is undefined. window.doSomething() still has this set to window.

Exception the fourth (and last): constructors

This is the least surprising exception to practitioners of a more traditional object-oriented language: this inside a constructor (a function invoked with new) is the object you’re creating.

Event handlers

Event handlers have a special mention in the MDN documentation and in most explanations I’ve seen online, but they don’t really need it because they still follow the same basic rule. When you click on your webpage, this will happen somewhere deep inside your browser:

const element = getTheElementYouClickedOn();
element.onclick(); // <-- This is how your function actually gets called

So what’s the value of this inside your event handler? You guessed it, it’s the element.

Conclusion

So, by just remembering this simple rule (this is always what comes before the dot when you call the function) and 4 exceptions, you’ll be able to say “YES!” the next time someone asks: