Understanding the this Keyword

The this keyword in JavaScript refers to the context or object a function is executed within. Every execution context (stack frame) has its own scope, variables, functions, and parameters, and typically its own this—except in arrow functions, which inherit this from their enclosing scope. The value of this depends on how a function is called.

Advanced Example Demonstrating this Behavior 

// Global context
console.log(this); // [object Window] or undefined (in strict mode)

function regularFunction() {
  console.log(this); // [object Window] or undefined (in strict mode)
}

const arrowFunction = () => {
  console.log(this); // Inherits from outer scope (e.g., global or enclosing object)
};

class MyClass {
  constructor(name) {
    this.name = name;
  }
  classMethod() {
    console.log(this); // MyClass instance
  }
}

function outerFunc() {
  let outerThis = this;
  console.log("Outer:", this); // [object Window] or undefined (in strict mode)

  function innerFunc() {
    console.log("Inner:", this); // [object Window] or undefined (in strict mode)
  }

  const nestedArrow = () => {
    console.log("Nested Arrow:", this); // Inherits from outerFunc's this (global or enclosing)
  };

  innerFunc();
  nestedArrow();

  const obj = new MyClass("Instance");
  obj.classMethod(); // MyClass instance
}

outerFunc();
  • Explanation:
    • Global this: In the global context, this is the Window object (or undefined in strict mode).
    • Function this: regularFunction’s this is the global object (or undefined in strict mode) when called directly.
    • Arrow Function this: arrowFunction inherits this from its outer scope (global here), not its own context.
    • Class Object this: classMethod’s this is the MyClass instance when called on obj.
    • Nested Functions this: innerFunc gets its own this (global), while nestedArrow inherits this from outerFunc (global).

Controlling this with call, apply, and bind

We can manually control the this context using three methods: call, apply, and bind. These methods allow us to specify the value of this when invoking a function.

  • call: Invokes a function with a specified this value and individual arguments. 
function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
  }
  const person = { name: "Alice" };
  greet.call(person, "Hello", "!"); // "Hello, Alice!"
  • apply: Invokes a function with a specified this value and an array of arguments. 
function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
  }
  const person = { name: "Bob" };
  greet.apply(person, ["Hi", "?"]); // "Hi, Bob?"
  • bind: Creates a new function with a specified this value and optional arguments, without invoking it immediately. 
function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
  }
  const person = { name: "Charlie" };
  const boundGreet = greet.bind(person, "Hey", "!");
  boundGreet(); // "Hey, Charlie!"

Resources