"this" in JavaScript

"This" in javascript refers to the properties of containing object. Infact, In JavaScript, the this keyword refers to the context within which a function is executed. The value of this is determined by how a function is called, and it can vary depending on the situation.

Example 1

function User(name) {
  console.log(this === window); // Output: false
  this.name = name;
  this.isAdmin = false;
}

const user = new User("John");

In example 1: When the User function is used as a constructor with the new keyword, it creates a new object, and this inside the function refers to that newly created object. The window object is the global object in a browser environment, and this would only refer to the window object if the code is executed in the global scope.

Example 2

function User(name) {
  console.log(this === window); // Output: true
  this.name = name;
  this.isAdmin = false;
}

User("John");

In example 2: If you call the User function without the new keyword, the value of this would depend on the execution context. In a browser environment, if the code is executed in the global scope, this would refer to the window object.

Example 3:

In JavaScript, arrow functions have a different behavior for the this keyword compared to regular functions. Unlike regular functions, arrow functions do not bind their own this value. Instead, they inherit the this value from the surrounding scope in which they are defined.

Here's an example to illustrate the difference:

javascriptCopy codefunction regularFunction() {
  console.log(this); // Output: window object (global scope) or undefined (strict mode)
}

const arrowFunction = () => {
  console.log(this); // Output: value of 'this' from the surrounding scope
};

regularFunction(); // 'this' refers to the global scope (window object)
arrowFunction(); // 'this' refers to the value of 'this' in the surrounding scope

In the case of arrow functions, the value of this is determined lexically, meaning it is based on the context in which the arrow function is defined, not how it is called.

If an arrow function is defined within a regular function, the arrow function will inherit the this value of the surrounding regular function. If an arrow function is defined in the global scope or any other non-function block, it will inherit the this value of the global scope (which is typically the window object in a browser environment).

Here's an example that demonstrates this behavior:

javascriptCopy codefunction regularFunction() {
  this.name = "John";

  const arrowFunction = () => {
    console.log(this.name); // Output: John
  };

  arrowFunction();
}

regularFunction();

In this example, the arrow function arrowFunction is defined within the regularFunction. When arrowFunction is called, it accesses the this value from its surrounding scope, which is the this value of regularFunction, resulting in this.name referring to "John".

It's important to note that since arrow functions do not have their own this value, attempts to use methods like bind, call, or apply on an arrow function to modify its this value will have no effect.