Apprendre Context of this inside classes

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

Tout était clair ?

Merci pour vos commentaires !

Section 1. Chapitre 6

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

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

Glissez pour afficher le 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

Tout était clair ?

Merci pour vos commentaires !

Section 1. Chapitre 6