Verlust des Kontexts in OOP in JavaScript

Bei der Arbeit mit Klassen kann der Kontext verloren gehen und this zeigt nicht auf das Klassenobjekt, sondern auf etwas anderes. Lassen Sie uns sehen, wie das passieren kann und was man dagegen tun kann.

Angenommen, wir haben eine Klasse User, die den Namen des Benutzers und ein Array der Städte enthält, in denen sich dieser Benutzer aufgehalten hat:

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

Angenommen, es gibt eine Methode, die die Städte ausgibt:

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

Angenommen, wir haben in dieser Methode beschlossen, eine bestimmte Hilfsmethode der Klasse zu verwenden. In diesem Fall geht der Kontext verloren:

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

Das Problem kann beispielsweise behoben werden, indem man eine Pfeilfunktion verwendet:

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

Korrigieren Sie den Fehler, der im folgenden Code gemacht wurde:

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