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 :

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

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

class 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 :

class 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 :

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

Corrigez l'erreur commise dans le code suivant :

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