This Keyword in JavaScript

This keyword refers to an object, that object which is executing the current bit of JavaScript code.

JavaScript function while executing has a reference to its current execution of any function, called this.

with this keyword, It does not matter how and where the function is declared or defined.

Example

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

var name = "Alto";
var obj1 = { name: "Tata", car: car};
var obj2 = { name: "Maruti", car: car};

car();           // "Alto"
obj1.car();      // "Tata"
obj2.car();      // "Maruti"

function car() {

console.log(this.name);

}

var name = "Alto";

var obj1 = { name: "Tata", car: car};

var obj2 = { name: "Maruti", car: car};

car(); // "Alto"

obj1.car(); // "Tata"

obj2.car(); // "Maruti"

A function’s this keyword behaves differently in JavaScript compared to another language.

In most cases, this it is determined by how value of the function is called.

It cannot be set by assignment on-time execution, and it will be different each time the function is called.

ES5 have the bind() method to set the value of a function’s this regardless of how it’s called, and ES2015 introduced arrow functions that don’t provide their own this binding.

Example

var test = {
        prop: 450,
        func: function() {
             returnthis.prop;
         },
      };

     console.log(test.func());
   // expected output: 450

var test = {

prop: 450,

func: function() {

returnthis.prop;

};

console.log(test.func());

// expected output: 450

This keyword has some different values depending on its usage:

Within a method, this keyword refers to the owner object.
As Single, this keyword refers to the global object.
this keyword within a function refers to the global object.
Within a function, within the strict mode, this keyword is undefined.
Creating an event, this keyword refers to the element that received the event.
Methods like call(), and apply() can refer to any object.

In an object method, this refers to the “owner” of the method.

In the example on the top of this page, this refers to the person object.

The person object is the owner of the fullName method.

Example

<html>
<body>
    <p id="JavaScriptdemo"></p>
    <script>
        var person = {
            firstName: "Ram",
            lastName: "Das",
            id: 100,
            fullName: function() {
                returnthis.firstName + " " + this.lastName;
            }
        };
        document.getElementById("JavaScriptdemo").innerHTML = person.fullName();
    </script>
</body>
</html>

<html>

<body>

var person = {

firstName: "Ram",

lastName: "Das",

id: 100,

fullName: function() {

returnthis.firstName + " " + this.lastName;

}

};

document.getElementById("JavaScriptdemo").innerHTML = person.fullName();

</script>

</body>

</html>

OUTPUT

Ram Das

Ram Das

This in Event Handlers

In HTML event handlers, this refers to the HTML element that received the event:

<html>
   <body>
       <button onclick="this.style.display='none'">Click to Remove!</button>
   </body>
</html>

<html>

<body>

<button onclick="this.style.display='none'">Click to Remove!</button>

</body>

</html>

This in a Function (Default)

The owner of the function is the default binding for this.

Within function, this keyword refers to the Global object.

<html>
<body>
    <p id="JavaScriptdemo"></p>
    <script>
        document.getElementById("demo").innerHTML = myFunction();
        functionmyFunction() {
            return this;
        }
    </script>
</body>
</html>

<html>

<body>

document.getElementById("demo").innerHTML = myFunction();

functionmyFunction() {

return this;

}

</script>

</body>

</html>

OUTPUT

[object Window]

1	[object Window]

Global Scope

If a function uses ‘this’ keyword, is called from the global scope then this will point to the window object

<script>
    varmyVar = 10;
    functionWhoIsThis() {
        varmyVar = 20;

        alert("myVar = " + myVar); // 20
        alert("this.myVar = " + this.myVar); // 10
    }
    WhoIsThis(); // inferred as window.WhoIsThis()
</script>

varmyVar = 10;

functionWhoIsThis() {

varmyVar = 20;

alert("myVar = " + myVar); // 20

alert("this.myVar = " + this.myVar); // 10

}

WhoIsThis(); // inferred as window.WhoIsThis()

</script>

OUTPUT

[object Window]
myVar = 20

1 2	[object Window] myVar = 20

Example: this keyword inside inner function

<script>
    varmyVar = 10;
    functionSomeFunction() {
        functionWhoIsThis() {
            varmyVar = 20;

            alert("myVar = " + myVar); // 20
            alert("this.myVar = " + this.myVar); // 10
        }
        WhoIsThis();
    }
    SomeFunction();
</script>

varmyVar = 10;

functionSomeFunction() {

functionWhoIsThis() {

varmyVar = 20;

alert("myVar = " + myVar); // 20

alert("this.myVar = " + this.myVar); // 10

}

WhoIsThis();

}

SomeFunction();

</script>

OUTPUT

[object Window]
myVar = 20

1 2	[object Window] myVar = 20