Απώλεια περιβάλλοντος στην ΑΟΠ στο JavaScript

Κατά την εργασία με κλάσεις μπορεί να χαθεί το περιβάλλον και το this να δείχνει όχι στο αντικείμενο της κλάσης, αλλά σε κάτι άλλο. Ας δούμε πώς μπορεί να συμβεί αυτό και τι μπορούμε να κάνουμε γι' αυτό.

Ας υποθέσουμε ότι έχουμε μια κλάση User, που περιέχει το όνομα του χρήστη και έναν πίνακα με πόλεις στις οποίες αυτός ο χρήστης βρέθηκε:

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

Ας υποθέσουμε ότι υπάρχει μια μέθοδος που εμφανίζει τις πόλεις:

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

Ας υποθέσουμε ότι σε αυτή τη μέθοδο αποφασίσαμε να χρησιμοποιήσουμε κάποια βοηθητική μέθοδο της κλάσης. Σε αυτή την περίπτωση το περιβάλλον θα χαθεί:

class User {
	constructor(name, cities) {
		this.name = name;
		this.cities = cities;
	}
	
	showCities() {
		this.cities.forEach(function(city) {
			console.log(this.#cape(city)); // το περιβάλλον χάθηκε
		});
	}
	
	#cape(str) {
		return str[0].toUpperCase() + str.slice(1);
	}
}

Μπορούμε να διορθώσουμε το πρόβλημα, για παράδειγμα, χρησιμοποιώντας μια arrow function:

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

Διορθώστε το σφάλμα που γίνεται στον ακόλουθο κώδικα:

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