Pierderea contextului în OOP în JavaScript

În timpul lucrului cu clase, contextul se poate pierde și this va indica nu către obiectul clasei, ci către altceva. Să vedem cum se poate întâmpla acest lucru și ce putem face în legătură cu asta.

Să presupunem că avem clasa User, care conține numele utilizatorului și un array de orașe în care acest utilizator a fost:

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

Să presupunem că există o metodă care afișează orașele:

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

Să presupunem că în această metodă am decis să folosim o anumită metodă auxiliară a clasei. În acest caz, contextul se va pierde:

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

Putem remedia problema, de exemplu, prin utilizarea unei funcții săgeată:

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

Corectați eroarea comisă în următorul cod:

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