Before I get into the technical aspects of "this" keyword in JavaScript. Let me tell you, its all about the context in which you are using it. In simple conversations that we have in our day to day lives when we use "this" in our sentences the other person should have the context about what you are talking about to understand what "this" means.

Note: I would want you to write code given in this blog on your own to make your understanding more clearer that's why I have pasted screenshots of code instead of pasting a code snippet

1. Global Usage of "this"

When you just write console.log(this) you will get window object.

here "this" will have global context so it will refer to window object but when you write console.log(this) using node.js you will get {} empty object.

2. This Substitution

Whenever JavaScript is NOT in strict mode and it finds value of "this" to be undefined or null it replaces it with globalobject (window object if you use JS in browser and empty object in case of node.js). This is called "this" substitution

Here in above code when we call this function it gives globalobject (globalobject means window object if you use JS in browser and empty object in case of node.js) but this happens only if you are NOT using strict mode of JavaScript.

When you use strict mode and write this same function and call it in the same way you will get undefined

3.Call, Apply and Bind methods

These methods are used for borrowing functions.

Call() method

Here in the above code example function x is borrowed by object obj to display its firstname . Now this function can also be used by another object, you just have to pass that object instead of obj

You can also pass other arguments to function x using call method as shown in above code

Apply() method

apply method works in the same way as call method the only difference is that it takes other arguments as array.

Bind() method

bind method also works similar to call method difference is that it returns a function with new context for calling it later in the code. see code example below

You can also pass another argument when calling function later on in the code. see code example above.

4. this & arrow functions

arrow functions don't provide their own this binding (it retains the this value of the enclosing lexical context)
- MDN Docs

I know you didn't understand above sentence taken from MDN Docs. Let me simplify it for you. In traditional functions there is "this" binding which means it can access "this" using the function's context. Remember "this" considers the context in which it is being called.

Here in the code above, when function y is called it prints globalobject in the console (in non strict mode) and when function x is called from object obj it prints firstname in the console

In case of arrow functions, it does not have its own "this" binding, so it gets the value of "this" from its lexical context (click on the link to read about it).

In the code above globalobject is printed in console because arrow function gets value of "this" from its lexical context and here lexical context is global.

Let me take another example

here when I called arrow function it printed ashish because its lexical context was that traditional function and in that traditional function value "this" was object obj

5. this & DOM Elements

Now lets see what happens when we try to access "this" in a DOM element.

Here, this button prints HTMLButtonElement in console

We know "this" considers the context in which it is being called and according to the context here it prints HTMLButtonElement

That's all about "THIS"!