Вивчайте 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

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 6

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

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

Свайпніть щоб показати меню


              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

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 6