The JavaScript this Keyword
What is this?
When the this keyword is used in a function, it refers to an Object.
Which Object, is not decided when the function is written.
The value of this is decided when the function is called.
Note
This chapter contains an advanced topic.
Make sure you understand basic JavaScript functions before continuing.
Functions are Methods
In JavaScript all functions are object methods.
A function can be:
- A method of a JavaScript object
- A method of the global object
this in an Object Method
When a function is an object method:
this refers to the object that owns the method.
Example
An object with 3 properties, firstName, lastName, fullName.
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
person.fullName();
Try it Yourself »
In the example above, this refers to the person object.
this.firstName means the firstName property of person.
this.firstName is the same as person.firstName.
this in a Function (Default)
By default, when this is used in a regular function, this refers to the global object.
In a browser window, the global object is [object Window]:
Note
In the example above, this is the global object.
this in a Function (Strict Mode)
JavaScript strict mode does not allow default binding.
In strict mode, this used inside a function is undefined.
Note
In the example above, this is undefined.
this Alone
When used outside a function, this always refers to the global object.
In a browser window the global object is [object Window]:
In a regular function in strict mode, when used outside a function, this also refers to the global object:
Note
In both the examples above, this is the global object.
It is so because , this is in the global scope.
this in Event Handlers
In HTML event handlers, this refers to the HTML element that received the event:
Examples
<button onclick="this.innerHTML='Clicked!'">Click Me</button>
Try it Yourself »
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Try it Yourself »
this in Arrow Functions
Arrow functions do not have their own this. They inherit this from the surrounding scope.
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.
What is this?
In JavaScript, the this keyword refers to an object.
The this keyword refers to different objects depending on how it is used:
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 object method, this refers to the object. |
In an event, this refers to the element that received the event. |
in methods like call(), apply(),
and bind(), this can refer to any object. |
Note
this is not a variable.
this is a keyword.
You cannot change the value of this.
Examples to Understand
Below are two examples that call the same method twice:
- When the page loads
- 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.
Examples
With a regular function this represents the object that calls the function:
// Regular 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);
With an arrow function this represents the owner of the function:
// Arrow 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);
Arrow Functions in Methods
Note
With arrow functions there are no binding of this.
They are not well suited for defining object methods.
Example
const person = {
firstName: "John",
sayHello: () => {
return this.firstName;
}
};
person.sayHello();
Try it Yourself »
Note
The example above does not work as expected because thisdoes not refer to the person object.
Arrow functions can be useful inside methods when you want to keep the same
this value.
Example
const person = {
firstName: "John",
sayHello: function() {
return () => this.firstName;
}
};
let hello = person.sayHello();
hello();
Common Mistakes
Arrow Functions as Object Methods
Arrow functions do not bind their own this.Assuming this Refers to an Object
The value of this depends on how the function is called.Forgetting Strict Mode Behavior
In strict mode, this can be undefined.
What's Next?
Now you understand how this works naturally.
Are you ready to learn how to control it manually?
The JavaScript call() Function
