JavaScriptthis in Functions
What isthis?
In JavaScript, thethis keyword refers to anobject.
Thethis keyword refers todifferent objects depending on how it is used:
Alone,this refers to theglobal object. |
In a function,this refers to theglobal object. |
In a function, in strict mode,this isundefined. |
In an object method,this refers to theobject. |
In an event,this refers to theelement that received the event. |
Methods likecall(),apply(),andbind() can referthis toany object. |
Note
this is not a variable.
this is a keyword.
You cannot change the value ofthis.
this Alone
When used alone,this refers to theglobal object.
Becausethis is in the global scope.
In a browser window the global object is[object Window]:
Instrict mode, when used alone,this also refers to theglobal object:
this in a Function (Default)
In a function, by default,this is theglobal object.
In a browser window, the global object is[object Window]:
this in a Function (Strict)
JavaScriptstrict mode does not allow default binding.
When used in a function, in strict mode,this isundefined.
this in Event Handlers
In HTML event handlers,this refers to the HTML element that received the event:
this in Arrow Functions
In regular functions thethis keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions thethis keywordalways represents the object that defined the arrow function.
In short, with arrow functions there are no binding ofthis.
Note
Arrow functions do not have their ownthis.
They are not well suited for definingobject methods.
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 functionthis represents the object thatcalls the function:
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);
Example
With an arrow functionthis represents theowner of the function:
hello = () => {
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);
Remember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.
this Precedence
Use the following precedence of order to determine which objectthis refers to:
| Order | Object | Because |
|---|---|---|
| 1 | bind() | this is in a function being called using bind() |
| 2 | apply() | this is in a function being called using apply() |
| 2 | call() | this is in a function being called using call() |
| 3 | Object method | this is in an object function (method) |
| 4 | Global scope | this is in a function in the global scope |
