This in JavaScript

This is a keyword in JavaScript that tells how a piece of code should run depending on where it has been assigned.

In order, to understand the working of this , we need to understand how does it works in global context, function context and class context

1. Global Context

this in global context, refers to the global object. For example, window object

console.log(this) // prints the window object

Output:

2. Functional Context

this in functional context, refers to the object from where the function has been called.

Examples

1. When the function is being called from global scope it refers to the global object.

    function foo(){
        console.log(this)
    }
   

   Output

   

2. When the function is being called from an Object it refers to that object.

    const fooObj = {
       name: "My name is Foo",
       action: function (){
            console.log(this)
        }
    }
   

   Output

   

When the function is an arrow function and is called from global scope it returns the object from its lexical scope. Here the global object itself is the lexical scope.

Lexical, in JavaScript, means the location of the variables, functions available in source code. Lexical Scoping means knowing the where the variables are declared to determine where the same variables are available down as in nested functions or object.

const foo = ()=>{
    console.log(this)
}

Output

1. When an arrow function is called as a method of an object, it doesn’t refer to that object. Instead, it inherits this from the surrounding (outer) lexical scope in which the object is defined.

    const fooObj = {
       name: "My name is Foo",
       arrowFunc: ()=>{
            console.log(this)
        }
    }
   

   Output

   Since, the outer scope of fooObj is global itself so for this reason arrow function arrowFunc prints global object.

   

   3 Class Context

   In ES6 classes, regular methods behave like normal object methods:

    class Person {
      constructor(name) {
        this.name = name;
      }
   
      greet() {
        console.log(this.name);
      }
    }
   
    const p = new Person("Neel");
    p.greet(); // Neel
   

   Explanation:

   • this in greet() refers to the instance of the class (p).

   • Every time you call p.greet(), this points to the object p.

---

2️⃣ Calling Method Separately

    const greetFn = p.greet;
    greetFn(); // undefined (or error in strict mode)

• greetFn is called as a regular function, not via the object.

• this loses its binding to the instance → defaults to undefined (strict mode) or window (non-strict).

Fix: bind this:

    const greetFn = p.greet.bind(p);
    greetFn(); // Neel

---

3️⃣ Arrow Functions in Classes

Arrow functions do not have their own this, so they inherit from the lexical scope where they were defined.

    class Person {
      constructor(name) {
        this.name = name;

        this.sayHello = () => {
          console.log(this.name);
        };
      }
    }

    const p = new Person("Neel");
    p.sayHello(); // Neel

    const fn = p.sayHello;
    fn(); // still Neel!

✅ Key difference:

• Arrow functions are often used in classes to preserve this, especially for callbacks, event handlers, or asynchronous code.

• No need to bind(this) manually.

---

4️⃣ Static Methods

    class Person {
      static info() {
        console.log(this);
      }
    }

    Person.info(); // Person class itself

• this in a static method refers to the class, not an instance.