Lernen 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

War alles klar?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 6

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

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 um das Menü anzuzeigen


              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

War alles klar?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 6