this Keyword in JavaScript Objects

The this keyword in JavaScript is a special identifier that refers to the context object in which a function or method is executed. Understanding this is crucial because it determines which object the properties and methods belong to at runtime.

This section explains how this behaves in different scenarios, including object methods, constructor functions, ES6 classes, arrow functions, and how to control its value using call, apply, and bind.

this in Object Methods

When a method is called as a property of an object, this refers to the object itself (the owner of the method).

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm Alice"

const greet = person.greet;
greet(); // undefined (or global object in non-strict mode)

this in Constructor Functions

In constructor functions, this refers to the newly created instance.

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log(`Hi, I'm ${this.name}`);
  };
}

const john = new Person("John");
john.greet(); // "Hi, I'm John"

this in ES6 Classes

Classes behave similarly to constructor functions:

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

  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

const alice = new Person("Alice");
alice.greet(); // "Hi, I'm Alice"

this in Arrow Functions

Arrow functions do not have their own this. Instead, they inherit this from the lexical scope (the surrounding code where they were defined).

const person = {
  name: "Bob",
  greet: () => {
    console.log(`Hi, I'm ${this.name}`);
  }
};

person.greet(); // "Hi, I'm undefined"

Correct Usage with Lexical this:

Arrow functions are ideal for callbacks inside methods where you want to preserve this from the outer scope:

const person = {
  name: "Bob",
  greet() {
    const inner = () => {
      console.log(`Hi, I'm ${this.name}`);
    };
    inner();
  }
};

person.greet(); // "Hi, I'm Bob"

Controlling this with call, apply, and bind

JavaScript allows explicit control of this using:

a) call

Invokes a function with a specific this and arguments.

function greet(greeting) {
  console.log(`${greeting}, I'm ${this.name}`);
}

const person = { name: "Alice" };
greet.call(person, "Hello"); // "Hello, I'm Alice"

b) apply

Similar to call, but arguments are passed as an array.

greet.apply(person, ["Hi"]); // "Hi, I'm Alice"

c) bind

Returns a new function with this permanently bound.

const greetAlice = greet.bind(person, "Hey");
greetAlice(); // "Hey, I'm Alice"

this in Global Context

• In non-strict mode, this in the global scope refers to the global object (window in browsers, global in Node.js).
• In strict mode, this is undefined in the global scope.

console.log(this); // window (browser, non-strict)
"use strict";
console.log(this); // undefined

Summary Table