bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JavaScript this Keyword

Concept visual

JavaScript this Keyword

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

this in Objects The this keyword refers to an object. In JavaScript, this is used to access the object that is calling a method. this in an Object Method When used inside an object method, this refers to the object.

Example

const person = {
firstName: "John", lastName: "Doe", age: 50, fullName: function() {
return this.firstName + " " + this.lastName;
}
};

In the example above:

this.firstName refers to the firstName property of the person object this.lastName refers to the lastName property of the person object

Why Use this?

The this keyword makes it possible to use the same method with different objects.

Example

const person1 = {
name: "John", hello: function() {
return "Hello " + this.name;
}
};
const person2 = {
name: "Anna", hello: function() {
return "Hello " + this.name;
}
};
document.getElementById("demo").innerHTML = person1.hello();

this Alone

When used alone, this refers to the global object.
In a browser, the global object is the window object.

Example

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

Note:

In strict mode, this is undefined when used alone. this in a Function

In a regular function, this also refers to the global object.
Example function myFunction() {
return this;
}
document.getElementById("demo").innerHTML = myFunction();

Try it Yourself �

Summary

In an object method, this refers to the object this lets methods access object properties Used alone, this refers to the global object

See Also:

What are JavaScript Objects?

What are Object Properties?

What are Object Methods?

How to Display JavaScript Objects

What is an Object Constructor?

Advanced Chapters:

JavaScript Object Definitions

JavaScript Object Advanced this

JavaScript Object Iterations

JavaScript Object Getters & Setters

JavaScript Object Management

JavaScript Object Protection

JavaScript Object Prototypes

JavaScript Object Reference

Previous

The JavaScript this Keyword

Next

JavaScript Temporal Instant