JavaScript this

In this tutorial, you will learn about JavaScript’s this keyword with the assistance of examples.

What is this?

The JavaScript this catchphrase alludes to the object it has a place with.

It has various values relying upon where it is used:

• In a strategy, this alludes to the owner object.

• Alone, this alludes to the global object.

• In a function, this alludes to the global object.

• In a function, in exacting mode, this is undefined.

• In an event, this alludes to the element that received the event.

• Methods like call(), and apply() can allude this to any object.

In JavaScript, this watchword alludes to the object where it is called.

1. this Inside Global Scope

At the point when this is used alone, this refers to the global object (window object in browsers). For instance,

let a = this;
console.log(a);  // Window {}

this.name = 'Sara';
console.log(window.name); // Sara

Here, this.name is the same as window.name.

---

2. this Inside Function

At the point when this is used in a function, this alludes to the global object (window object in browsers). For instance,

function greet() {

    // this inside function
    // this refers to the global object
    console.log(this);
}

greet(); // Window {}

---

3. this Inside Constructor Function

In JavaScript, constructor functions are used to make objects. At the point when a function is used as a constructor function, this alludes to the object inside which it is used. For instance,

function Person() {

    this.name = 'Salman';
    console.log(this);

}

let person1 = new Person();
console.log(person1.name);

Output

Person {name: "Salman"}
Salman

Here, this refers to the person1 object. That’s why person1. name gives us Salman.

Note: When this is used with ES6 classes, it refers to the object inside which it is used (like constructor functions).

---

4. this Inside Object Method

At the point when this is used inside an object’s strategy, this alludes to the object it exists in. For instance,

const person = {
    name : 'Salman',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);
        console.log(this.name);
    }
}

person.greet();

Output

{name: "Salman", age: 25, greet: ƒ}
Salman

In the above example, this refers to the person object.

---

5. this Inside Inner Function

At the point when you access this inside an inward function (inside a strategy), this alludes to the global object. For instance,

const person = {
    name : 'Salman',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);        // {name: "Salman", age ...}
        console.log(this.age);  // 25

        // inner function
        function innerFunc() {
        
            // this refers to the global object
            console.log(this);       // Window { ... }
            console.log(this.age);    // undefined
            
        }

        innerFunc();

    }
}

person.greet();

Output

{name: "Salman", age: 25, greet: ƒ}
25
Window { …}
undefined

Here, this inside innerFunc() refers to the global object because innerFunc() is inside a method.

In any case, this.age outside innerFunc() alludes to the person object.

---

6. this Inside Arrow Function

Inside the arrow function, this alludes to the parent scope. For instance,

const greet = () => {
    console.log(this);
}
greet(); // Window {...}

Arrow functions don’t have their own this. At the point when you use this inside an arrow function, this alludes to its parent scope object. For instance,

const greet = {
    name: 'Salman',

    // method
    sayHi () {
        let hi = () => console.log(this.name);
        hi();
    }
}

greet.sayHi(); // Salman

Here, this.name inside the hi() function alludes to the greet object.

You can likewise use the arrow function to solve the issue of having undefined when using a function inside a technique (as seen in Example 5). For instance,

const person = {
    name : 'Salman',
    age: 25,

    // this inside method
    // this refers to the object itself
    greet() {
        console.log(this);
        console.log(this.age);

        // inner function
        let innerFunc = () => {
        
            // this refers to the global object
            console.log(this);
            console.log(this.age);
            
        }

        innerFunc();

    }
}

person.greet();

Output

{name: "Salman", age: 25, greet: ƒ}
25
{name: "Salman", age: 25, greet: ƒ}
25

Here, innerFunc() is characterized using the arrow function. It takes this from its parent scope. Subsequently, this.age gives 25.

At the point when the arrow function is used with this, it alludes to the external scope.

---

7. this Inside Function with Strict Mode

At the point when this is used in a function with strict mode, this is undefined. For instance,

'use strict';
this.name = 'Salman';
function greet() {

    // this refers to undefined
    console.log(this);
}
greet(); // undefined

Note: When using this inside a function with strict mode, you can use JavaScript Function call().

For instance,

'use strict';
this.name = 'Salman';

function greet() {
    console.log(this.name);
}

greet.call(this); // Salman

At the point when you pass this with the call() function, greet() is treated as the strategy for this object (global object for this situation).

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

Javascript Miscellaneous