Tabt kontekst i OOP i JavaScript

Når man arbejder med klasser, kan konteksten gå tabt, og this vil ikke pege på klasseobjektet, men på noget andet. Lad os se på, hvordan det kan ske, og hvad man kan gøre ved det.

Lad os sige, at vi har en klasse User, som indeholder brugerens navn og en matrix af byer, som denne bruger har været i:

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

Lad os sige, at der er en metode, der viser byerne:

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

Lad os sige, at vi i denne metode besluttede at bruge en hjælpemetode i klassen. I dette tilfælde vil konteksten gå tabt:

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

Problemet kan løses, for eksempel, ved at introducere en pilfunktion:

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

Ret fejlen, der er begået i følgende kode:

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