Understanding this keyword in JavaScript

this is a special keyword in JavaScript that refers to the object that is executing the current function.

  • In simple terms, this refers to "who called the function."

1. Global Scope

    var myVar = 100;

    function WhoIsThis() {
    var myVar = 200;
    alert(myVar); // 200
    alert(this.myVar); // 100
    }

    WhoIsThis(); // window.WhoIsThis()

In this case, this refers to the global window object.

2. In Strict Mode

    "use strict";
    function test() {
    alert(this); // undefined
    }
    test();

3. Inside Nested Functions

    var myVar = 100;

    function outer() {
    function inner() {
        var myVar = 200;
        alert(myVar); // 200
        alert(this.myVar); // 100
    }

    inner();
    }

    outer();

4. Inside an Object Method

    var obj = {
    myVar: 300,
    whoIsThis: function () {
        var myVar = 200;
        alert(myVar); // 200
        alert(this.myVar); // 300
    }
    };

    obj.whoIsThis();

5. Using Constructor Functions

    function WhoIsThis() {
    this.myVar = 200;
    }

    var obj1 = new WhoIsThis();
    var obj2 = new WhoIsThis();
    obj2.myVar = 300;

    alert(obj1.myVar); // 200
    alert(obj2.myVar); // 300

6. Using call() and apply()

    var myVar = 100;

    function WhoIsThis() {
    alert(this.myVar);
    }

    var obj1 = { myVar: 200 };
    var obj2 = { myVar: 300 };

    WhoIsThis();              // 100
    WhoIsThis.call(obj1);     // 200
    WhoIsThis.apply(obj2);    // 300

7. Using bind()

    function SomeFunction(callback) {
    callback();
    }

    var obj = {
    myVar: 300,
    whoIsThis: function () {
        alert(this.myVar);
    }
    };

    SomeFunction(obj.whoIsThis); // 100 (window)
    SomeFunction(obj.whoIsThis.bind(obj)); // 300

 Precedence Order of this

  1. bind()
  2. call() and apply()
  3. Object method (dot notation)
  4. Global scope

 Summary Table

Contextthis refers to
Global functionwindow (or undefined in strict mode)
Object methodThe object itself
Constructor functionThe new object
call() / apply()The object passed as argument
bind()The bound object
Arrow functionLexical scope (outer this)

Tip: Always ask yourself: “Who is calling this function?” That’s your this!