Kontekstin menettäminen OOP:ssa JavaScriptissä

Luokkien kanssa työskennellessä konteksti voi kadota ja this osoittaa ei luokan olioon, vaan johonkin muuhun. Katsotaan kuinka tämä voi tapahtua ja mitä sille tehdä.

Olkoon meillä luokka User, joka sisältää käyttäjän nimen ja taulukon kaupungeista, joissa tämä käyttäjä on käynyt:

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

Olkoon metodi, joka tulostaa kaupungit:

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

Olkoon tässä metodissa päätimme käyttää jotain luokan apumetodia. Tässä tapauksessa konteksti katoaa:

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

Ongelman voi korjata esimerkiksi käyttämällä nuolifunktiota:

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

Korjaa seuraavassa koodissa tehty virhe:

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