Explanation of JavaScript "this" keyword

this keyword is mostly used in object-oriented programming. Most of the beginners are confused with this keyword. Today I am trying to tell about this keyword easily so that everyone can understand.

Generally, this keyword refers to the object by which it is bounded.
this keyword has different values depending on the place of use.

In a method, this refers to the owner object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.
In the call() and apply() method this can refer to any object.

In a method:

const person = {
  firstName: "John",
  lastName : "Doe",
  id    : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
console.log(person.fullName()); //output John Doe

In this object fullName is a method. Here this in fullName method refers to owner object that means person object.

this Alone:

console.log(this); //output window

When we use this alone the owner is the global object so this refers to the window object.

“use strict”
console.log(this); //output window

If we use this alone in strict mode, it also refers to the global window object.

In a function:

function myFunction() {
  return this;
}
console.log(myFunction()); //output window

When we use this in a function this refers to the global window object.

If we use this in a function in strict mode then this is undefined.

“use strict”
function myFunction() {
  return this;
}
console.log(myFunction()); //output undefined

In an event:
If we use this in an event or javascript event handlers this refers to the element which is used to trigger the event. For example

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>

Here this refers to the button element because here button is the event trigger.

In call() and apply() method:
call() and apply() methods both are javascript built-in methods.Both of them are used to call an object method with another object as the argument.

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person2 = {
  firstName:"John",
  lastName: "Doe",
}
const person3 = {
  firstName:"Feroj",
  lastName: "Alam",
}
console.log(person1.fullName.call(person2)); //output John Doe
console.log(person1.fullName.apply(person3)); //output Feroj Alam

Here person1 object has no first name and last name. We use the call() method to use first name and last name from another object which is person2. We can also use apply() method to use the first and last name from another object that is person3. So that this refers to the person2 object and person3 object.