Explain how "this" works in JavaScript

Answer:

The keyword this in JavaScript refers to the object that is executing the current function. Its value is determined by the context in which the function is invoked, not where it is defined. This can vary based on how and where the function is called.

How this Works:

1. Global Context:

• In the global scope, this refers to the global object (e.g., window in browsers or global in Node.js).

console.log(this); // In browsers, this logs the `window` object

2. Inside Functions:

• In non-strict mode, this refers to the global object.
• In strict mode ('use strict';), this is undefined.

function showThis() {
  console.log(this);
}
showThis(); // In browsers: `window` (non-strict), `undefined` (strict mode)

3. Inside Methods:

• When a function is called as a method of an object, this refers to the object.

const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  },
};
obj.greet(); // Outputs: "Alice"

4. Arrow Functions:

• Arrow functions do not have their own this. They inherit this from the surrounding lexical context.

const obj = {
  name: 'Alice',
  greet: () => {
    console.log(this.name);
  },
};
obj.greet(); // Outputs: undefined (inherited from global scope)

5. In Constructors:

• Inside a constructor, this refers to the new object being created.

function Person(name) {
  this.name = name;
}
const person = new Person('Alice');
console.log(person.name); // "Alice"

6. Explicit Binding:

• Using .call, .apply, or .bind, you can explicitly set the value of this.

function greet() {
  console.log(this.name);
}
const user = { name: 'Alice' };
greet.call(user); // "Alice"

MDN Web Docs: this