This keyword

This keywords (objects).

What is this?
In JavaScript, the this keyword refers to an object.

Which object depends on how this is being invoked (used or called).

The this keyword refers to different objects depending on how it is used:

In an object method, this refers to the 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. Methods like call(), apply(), and bind() can refer this to any object.

Note: this is not a variable. It is a keyword. You cannot change the value of this.

Example of this keyword:
this in a Method: When used in an object method, this refers to the object.
this Alone: When used alone, this refers to the global object.
Because this is running in the global scope

let x = this; document.getElementById("demo").innerHTML = x;

results [object Window]

This Keyword with arrow function.
What About this?
The handling of this is also different in arrow functions compared to regular functions.

In short, with arrow functions there are no binding of this.

In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.

With arrow functions the this keyword always represents the object that defined the arrow function.

Let us take a look at two examples to understand the difference.

Both examples call a method twice, first when the page loads, and once again when the user clicks a button.

The first example uses a regular function, and the second example uses an arrow function.

The result shows that the first example returns two different objects (window and button), and the second example returns the window object twice, because the window object is the "owner" of the function.

Example
With a regular function this represents the object that calls the function:
Click Me!

var hello;

hello = function() {
document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.

Example
With an arrow function this represents the owner of the function:
Click Me!

var hello;

hello = function() => {
document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.

This Keyword on DOM
The "this" keyword in Javascript refers to the DOM element when used inside an event fired on the DOM element.