Förlust av kontext i OOP i JavaScript

När man arbetar med klasser kan kontexten gå förlorad och this kommer att peka inte på klassens objekt, utan på något annat. Låt oss titta på hur detta kan hända och vad man kan göra åt det.

Låt oss säga att vi har en klass User, som innehåller användarens namn och en array av städer som denna användare har besökt:

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

Låt oss säga att det finns en metod som skriver ut städerna:

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

Låt oss säga att vi i denna metod bestämde oss för att använda någon hjälpmetod i klassen. I detta fall kommer kontexten att gå förlorad:

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

Man kan lösa problemet, till exempel, genom att introducera 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);
	}
}

Rätta felet som gjorts i följande kod:

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