navvan

Posted on Oct 17

🕵️‍♂️ Unraveling the JavaScript "this" Enigma 🕵️‍♀️

Visit our official platform: Navvan

1. Function Context 🎭

When a regular function is invoked, the value of this depends on how the function is called. Let's explore different scenarios: 🕵️‍♂️

1.1. Method Invocation 🎨

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

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, my name is ${this.name}! 😄`);
  },
};
person.greet(); // Output: Hello, my name is Alice! 😄

In the example above, this inside the greet method refers to the person object. 👤

1.2. Function Invocation 📞

When a function is invoked without an object reference, this refers to the global object (window in browsers, global in Node.js) in non-strict mode, or undefined in strict mode. 🌐

function sayHello() {
  console.log(`Hello, ${this}! 👋`);
}
sayHello(); // Output: Hello, [object Window]! 👋 (in a browser)

1.3. Constructor Invocation 🏗️

When a function is invoked with the new keyword, a new object is created, and this refers to that newly created object. 🆕

function Person(name) {
  this.name = name;
}
const alice = new Person('Alice');
console.log(alice.name); // Output: Alice 😎

1.4. Explicit Binding 🔗

You can explicitly set the value of this using the call(), apply(), or bind() methods. 🎯

function greet() {
  console.log(`Hello, my name is ${this.name}! 😊`);
}
const person = { name: 'Alice' };
greet.call(person); // Output: Hello, my name is Alice! 😊
greet.apply(person); // Output: Hello, my name is Alice! 😊
const boundGreet = greet.bind(person);
boundGreet(); // Output: Hello, my name is Alice! 😊

2. Arrow Functions 🏹

Arrow functions do not have their own this binding. Instead, they inherit this from the parent (surrounding) scope. 👨‍👩‍👧‍👦

const person = {
  name: 'Alice',
  greet() {
    const innerArrow = () => {
      console.log(`Hello, my name is ${this.name}! 😄`);
    };
    innerArrow();
  },
};
person.greet(); // Output: Hello, my name is Alice! 😄

In the example above, the arrow function innerArrow inherits this from the surrounding greet method. 👪

3. Class Context 🎓

In ES6 classes, this behaves differently in constructor functions, instance methods, and static methods. 🏫

3.1. Constructor Functions 🔧

In a class constructor, this refers to the newly created instance of the class. 🆕

class Person {
  constructor(name) {
    this.name = name;
  }
}
const alice = new Person('Alice');
console.log(alice.name); // Output: Alice 😎

⚠️ However, there's an interesting twist! If the constructor function returns another non-primitive value (like an object), the this binding is discarded, and the returned value becomes the result of the new expression. 😮

function Car(model) {
  this.model = model;
  return { year: 2023 };
}

let myCar = new Car("Tesla");
console.log(myCar.model); // Output: undefined
console.log(myCar.year); // Output: 2023

3.2. Instance Methods 🎭

In an instance method, this refers to the instance of the class on which the method is called.

3.3. Static Methods 📊

In a static method, this refers to the class itself, not an instance of the class. 📈

class Animal {
  makeSound() {
    console.log(this); // `this` refers to the instance
  }

  static getSpecies() {
    console.log(this); // `this` refers to the class
  }
}

const dog = new Animal();
dog.makeSound(); // Output: instance of Animal
Animal.getSpecies(); // Output: Animal

🌟 In derived classes, constructors have slightly different behavior. Unlike base class constructors, derived constructors have no initial this binding. Calling super() creates the this binding within the constructor.

🚨 It's important to remember that referring to this before calling super() will throw an error. 🚨

class Vehicle {}
class Car extends Vehicle {
  constructor() {
    super(); // Creates `this` binding
    console.log(this); // Now, `this` is available
  }
}

new Car();

4. Global Context 🌐

In the global execution context, this refers to the global object (window in browsers, global in Node.js). 🌍

console.log(this === window); // Output: true 😄 (in a browser)

5. Event Handlers 🎉

When a function is used as an event handler, this refers to the element that triggered the event. 🎯

<button id="myButton">Click me! 🖱️</button>

const button = document.getElementById('myButton');
button.addEventListener('click', function () {
  console.log(this === button); // Output: true 😄
});

In the example above, this inside the event handler function refers to the button element. 🔘

6. Strict Mode 🚨

In strict mode, the value of this remains whatever it was set to when entering the execution context. If this is not defined, it remains undefined. 🤔

function strictFunc() {
  return this;
}
console.log(strictFunc() === undefined); // Output: true 😅

Conclusion 🎉

Phew! We've covered some ground in this little dive into the context of this in JavaScript. From normal to arrow functions, classes to event handlers, and strict mode considerations, this plays a crucial role in understanding how JS code behaves. 🌟

Remember, the value of this is determined by how a function is called, not where it's defined. 💪

If you enjoyed this article, please make sure to Subscribe, Like, Comment, and Connect with us today! 🌐

Visit our official platform: Navvan

DEV Community