Learn Context of this inside classes | ES6 Class Fundamentals

When you define methods inside a JavaScript class, the value of this inside those methods usually refers to the specific instance of the class on which the method was called. This means you can access and modify the instance's properties using this.propertyName. However, the value of this is determined by how a method is invoked, not where it is defined. If you detach a method from its instance and call it as a regular function, this may become undefined (in strict mode) or refer to the global object (in non-strict mode), leading to unexpected behavior.


              12345678910111213141516
            
class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  
  displayInfo() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}

const myCar = new Car('Toyota', 'Corolla');
myCar.displayInfo(); // Car: Toyota Corolla

const detachedDisplay = myCar.displayInfo;
// detachedDisplay(); // In strict mode: TypeError or 'this' is undefined; in non-strict mode: 'this' is the global object

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 6

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain why 'this' behaves differently when the method is detached?

How can I ensure 'this' always refers to the class instance in such cases?

Are there best practices for handling 'this' in JavaScript classes?

Awesome!

Completion rate improved to 6.25

Swipe to show menu


              12345678910111213141516
            
class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  
  displayInfo() {
    console.log(`Car: ${this.make} ${this.model}`);
  }
}

const myCar = new Car('Toyota', 'Corolla');
myCar.displayInfo(); // Car: Toyota Corolla

const detachedDisplay = myCar.displayInfo;
// detachedDisplay(); // In strict mode: TypeError or 'this' is undefined; in non-strict mode: 'this' is the global object

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 6