Demystifying the 'this' Keyword in JavaScript

The `this` Keyword: A Fundamental Concept

In JavaScript, the this keyword is a powerful, yet often misunderstood, feature. It's a special reference to an object, but which object it refers to is not static. Its value is determined by the execution context—in other words, how and where a function is called. Understanding this is a crucial step towards mastering JavaScript.

`this` in Different Contexts

The value of this changes dramatically depending on the context. Let's break down the most common scenarios.

1. Global Context

When this is used outside of any function, in the global scope, it refers to the global object. In a web browser, the global object is always window.

// In a browser's global scope
console.log(this === window); // true

2. Function Context

Inside a regular function, the value of this depends entirely on how that function is invoked.

Simple Function Call

In non-strict mode, if a function is called by itself (e.g., myFunction()), this will default to the global object (window).

function showThis() {
  console.log(this);
}

showThis(); // In a browser, this will log the window object

Strict Mode

In strict mode (declared with "use strict";), if this is not explicitly set by the call, it will be undefined. This prevents accidental modification of the global object.

"use strict";
function showThisStrict() {
  console.log(this);
}

showThisStrict(); // undefined

As an Object Method

When a function is called as a method of an object, this refers to the object the method is called on. This is one of the most common and intuitive uses of this.

const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is John"

As a Constructor

When a function is used as a constructor with the new keyword, this is bound to the new object being created and returned.

function Person(name) {
  this.name = name;
}

const john = new Person("John");
console.log(john.name); // "John"

Explicitly Setting `this`: `call`, `apply`, and `bind`

JavaScript provides three powerful function methods to control the value of this explicitly, allowing you to "borrow" methods and set the context.

`call()` and `apply()`

These methods immediately invoke a function with a specified this value. The only difference is how they accept arguments: call() takes a comma-separated list, while apply() takes a single array of arguments.

function greet(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}

const person = { name: "Alice" };

greet.call(person, "Hi");       // "Hi, my name is Alice"
greet.apply(person, ["Hello"]); // "Hello, my name is Alice"

`bind()`

The bind() method creates a new function where this is permanently set to a provided value. This is extremely useful for callbacks and event handlers where the original context might be lost.

const person = {
  name: "Bob",
  greet: function() {
    console.log(`My name is ${this.name}`);
  }
};

const greetBob = person.greet.bind(person);
greetBob(); // "My name is Bob"

Arrow Functions and `this`

Arrow functions (introduced in ES6) revolutionize how this works. They do not have their own this context. Instead, this is determined lexically—it inherits the this value from its surrounding (enclosing) scope.

const person = {
  name: "Charlie",
  sayName: function() {
    // 'this' here refers to the person object
    setTimeout(() => {
      // 'this' inside the arrow function is the same as outside
      console.log(`My name is ${this.name}`);
    }, 1000);
  }
};

person.sayName(); // After 1 second, logs "My name is Charlie"

This behavior avoids the common pre-ES6 pattern of having to write var self = this; or using bind() within object methods.

`this` in Other Scenarios

• Event Handlers: When a function is used as an event handler, this is set to the element that triggered the event.^[1][3]
• Prototype Chain: If a method is on an object's prototype chain, this still refers to the object the method was called on, not the prototype object itself.^[5]
• Getters and Setters: In a getter or setter, this is bound to the object from which the property is being accessed or set.^[5]

Sources

• w3schools.com
• medium.com
• mozilla.org
• unibo.it
• cach3.com