Open In App
Related Articles

JavaScript this Keyword

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

JavaScript this keyword always holds the reference to a single object, which defines the current line of code’s execution context which means this keyword refers to the object that is currently executing the code.

The value that this store is the current execution context of the JavaScript program.

Thus, when used inside a function this value will change depending on how that function is defined, how it is invoked, and the default execution context. this keyword will refer to different objects depending on how it is used. 

NOTE: This is a keyword. You cannot change the value of this.

There are various ways to set this in JavaScript:

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.

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

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());

                    

Output
undefined

Arrow Function Binding

When this is used in the arrow function then this has lexical scope so without the function keyword this is uanble 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:

We can see that explicit binding has higher precedence than Other inbuilt bindings.

What this returns depends on where it has been used?

Let us look at different positions where this keyword can be called.

  • this alone : refers to the global object.
  • this in function : the global object is the default binding for this.
  • this in strict mode : in strict mode, this is undefined.
  • this in event handlers

Example of this alone: In a browser window the global object is [object Window]

Javascript

console.log(this)

                    

Output: We can see that this alone refers to the window object in the global scope.

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

Example of this in function: In a browser window the global object is [object Window]

Javascript

function demo(){
    return this;
}
console.log(demo());

                    

Output: Here, also this keyword returns the window object. 

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

Example of this in strict mode:

Javascript

(function(){
    "use strict";
    console.log(this);
})();

                    

Output: In JavaScript, this keyword in global scope is undefined.

undefined

Example of this in event handlers: Refers to the current element that it has received.

HTML

<button onmouseover="this.style.color='green'">
    Hover to change color
</button>

                    

Output: this keyword here received the button element

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

We have a complete list of JavaScript reserved words, to learn about them please refer to JavaScript | Reserved Words article.



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads