Tapning av kontekst i OOP i JavaScript

Ved arbeid med klasser kan konteksten gå tapt og this vil peke ikke på klasseobjektet, men på noe annet. La oss se hvordan dette kan skje og hva vi kan gjøre med det.

La oss si at vi har en klasse User, som inneholder brukerens navn og en array av byer som denne brukeren har besøkt:

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

La oss si at det er en metode som viser byene:

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

La oss si at i denne metoden bestemte vi oss for å bruke en eller annen hjelpemetode i klassen. I dette tilfellet vil konteksten gå tapt:

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

Problemet kan løses, for eksempel, ved å innføre en pilfunksjon:

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

Korriger feilen som er gjort 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);