Verlust des Kontexts in OOP in JavaScript

Bei der Arbeit mit Klassen kann der Kontext verloren gehen und this zeigt nicht auf das Klassenobjekt, sondern auf etwas anderes. Lassen Sie uns sehen, wie das passieren kann und was man dagegen tun kann.

Angenommen, wir haben eine Klasse User, die den Namen des Benutzers und ein Array der Städte enthält, in denen sich dieser Benutzer aufgehalten hat:

javascriptclass User {
  constructor(name, cities) {
    this.name = name;
    this.cities = cities;
  }
}

Angenommen, es gibt eine Methode, die die Städte ausgibt:

javascriptclass User {
  constructor(name, cities) {
    this.name = name;
    this.cities = cities;
  }
  
  showCities() {
    this.cities.forEach(function(city) {
      console.log(city);
    });
  }
}

Angenommen, wir haben in dieser Methode beschlossen, eine bestimmte Hilfsmethode der Klasse zu verwenden. In diesem Fall geht der Kontext verloren:

javascriptclass User {
  constructor(name, cities) {
    this.name = name;
    this.cities = cities;
  }
  
  showCities() {
    this.cities.forEach(function(city) {
      console.log(this.#cape(city)); // Kontext ist verloren
    });
  }
  
  #cape(str) {
    return str[0].toUpperCase() + str.slice(1);
  }
}

Das Problem kann beispielsweise behoben werden, indem man eine Pfeilfunktion verwendet:

javascriptclass User {
  constructor(name, cities) {
    this.name = name;
    this.cities = cities;
  }
  
  showCities() {
    this.cities.forEach(city => {
      console.log(this.#cape(city));
    });
  }
  
  #cape(str) {
    return str[0].toUpperCase() + str.slice(1);
  }
}

javascriptclass Employee {
  constructor(name, salary, coeffs) {
    this.name = name;
    this.salary = salary;
    this.coeffs = coeffs;
  }
  
  getTotal() {
    return this.coeffs.reduce(function(res, coeff) {
      return res + this.salary * coeff;
    }, 0);
  }
}

let employee = new Employee('john', 1000, [1.1, 1.2, 1.3]);
let total = employee.getTotal();
console.log(total);