In JavaScript, this
keyword refers to the current context or scope within which code is executing. Its value is determined by how a function is called, and it can dynamically change depending on the invocation context.
The this keyword refers to different objects depending upon how it is used:
- When used within a method of an object,
this
points to that object.
- When used by itself,
this
points to the global object.
- Within a function,
this
typically points to the global object.
- In a function under strict mode,
this
becomes undefined.
- During an event,
this
points to the element that triggered the event.
- Methods such as
call()
, apply()
, and bind()
can reassign this
to any desired object.
JavaScript this Keyword Examples:
1. Using this in a Method
In the context of an object method in JavaScript, the `this` keyword refers to the object itself, allowing access to its properties and methods within the method’s scope. It facilitates interaction with the object’s data and behavior, providing a way to access and manipulate its state.
Example: Below is an example of this in Method.
Javascript
const person = {
name: 'John' ,
age: 30,
greet() {
console.log( 'Hello, my name is ' + this .name + ' and I am ' + this .age + ' years old.' );
}
};
person.greet();
|
Output
Hello, my name is John and I am 30 years old.
Explanation:
- We have an object
person
with properties name
and age
, and a method greet()
.
- Inside the
greet()
method, this.name
refers to the name
property of the person
object, and this.age
refers to the age
property.
- When we call
person.greet()
, this
refers to the person
object itself. So, this.name
and this.age
access the name
and age
properties of the person
object, allowing us to log a personalized greeting message to the console.
2. Using this in a Function
In a JavaScript function, the behavior of the this
keyword varies depending on how the function is invoked.
Syntax:
function exampleFunction() {
console.log(this); // Refers to the current execution context
}
Example: Below is an example of this in a function.
Javascript
function greet() {
console.log( 'Hello, my name is ' + this .name);
}
const person = {
name: 'John' ,
sayHello: greet
};
const anotherPerson = {
name: 'Alice'
};
greet();
person.sayHello();
greet.call(anotherPerson);
|
Output
Hello, my name is undefined
Hello, my name is John
Hello, my name is Alice
Explanation:
- When
greet()
is called directly, this
refers to the global object (in non-strict mode), or undefined
(in strict mode), since the function is invoked without an explicit context.
- When
sayHello()
is called as a method of the person
object, this
refers to the person
object itself, allowing access to its name
property.
- The
call()
method is used to explicitly specify the context for this
. When greet.call(anotherPerson)
is called, this
refers to the anotherPerson
object, allowing access to its name
property.
3. Using this alone
When used alone in JavaScript, outside of any specific context, the behavior of the this
keyword depends on whether the code is running in strict mode or not.
Example:
Explanation:
- In non-strict mode,
this
refers to the global object (e.g., window
in browsers, global
in Node.js), representing the global scope.
- In strict mode,
this
is undefined
when used alone outside of any function or object context. This behavior prevents accidental use of the global object and encourages safer coding practices.
4. Implicit Binding
When we call a function as a method of the object this keyword refers to the calling object
Example: In this example, we will see the implicit binding of this keyword.
Javascript
const person = {
name: "ram" ,
age: 22,
greet: function (){
return `Hello ${ this .name}, you are ${ this .age} years old`
}
}
console.log(person.greet());
|
Output
Hello ram, you are 22 years old
Output: Here this keyword is referring to the person object so it can access name and age values.
5. Explicit Binding
When we explicitly bind this keyword using the call(), bind(), or apply() method then this keyword default reference is changed to the object called using the above-specified methods.
Example: In this example, we will see the explicit binding of this keyword.
Javascript
function ageVerify(){
if ( this .age> 18){
console.log( "Yes you can drive" );
} else {
console.log( "No you cannot drive" );
}
}
const per1 = {age: 21};
const per2 = {age: 16};
ageVerify.call(per1);
ageVerify.call(per2);
|
Output
Yes you can drive
No you cannot drive
6. Default Binding
When this keyword is used in global scope this is set to window object.
Example: This example shows the Default binding.
Javascript
const age = 22;
function verifyAge (){
return this .age;
}
console.log(verifyAge());
|
7. Arrow Function Binding
When this is used in the arrow function then this has lexical scope so without the function keyword this is unable to refer to the object in the outer scope.
Example: This example shows the arrow function binding.
Javascript
const person = {
name: "ram" ,
age: 22,
greet : () =>{
return `Hello , you are ${ this .age} years old`
}
}
console.log(person.greet());
|
Output
Hello , you are undefined years old
The precedence order of this keyword is:
Supported Browser:
The browser supported are listed below:
We have a complete list of JavaScript reserved words, to learn about them please refer to JavaScript | Reserved Words article.
Last Updated :
11 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...