Perte de contexte en POO en JavaScript

Lorsque l'on travaille avec des classes, le contexte peut être perdu et this peut pointer non pas vers l'objet de la classe, mais vers autre chose. Voyons comment cela peut arriver et comment y remédier.

Supposons que nous ayons une classe User, qui contient le nom de l'utilisateur et un tableau des villes où cet utilisateur s'est rendu :

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

Supposons qu'il y ait une méthode qui affiche les villes :

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

Supposons que dans cette méthode, nous ayons décidé d'utiliser une méthode utilitaire de la classe. C'est dans ce cas que le contexte sera perdu :

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

Il est possible de corriger le problème, par exemple, en utilisant une fonction fléchée :

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);