Verlies van context in OOP in JavaScript

Bij het werken met klassen kan de context verloren gaan en zal this niet wijzen naar het object van de klasse, maar naar iets anders. Laten we kijken hoe dit kan gebeuren en wat we eraan kunnen doen.

Stel dat we een klasse User hebben, die de naam van de gebruiker en een array van steden bevat waar deze gebruiker is geweest:

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

Stel dat er een methode is die de steden weergeeft:

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

Stel dat we in deze methode besloten hebben een bepaalde hulpmethode van de klasse te gebruiken. In dit geval zal de context verloren gaan:

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

Het probleem kan worden opgelost, bijvoorbeeld door een pijlfunctie te introduceren:

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

Repareer de fout die gemaakt is in de volgende code:

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