Konteksverlies in OOP in JavaScript

Wanneer met klasse gewerk word, kan die konteks verlore gaan en sal this nie na die klasvoorwerp wys nie, maar na iets anders. Kom ons kyk hoe dit kan gebeur en wat om daaraan te doen.

Laat ons 'n klas User hê, wat die gebruiker se naam en 'n array van stede bevat waarin hierdie gebruiker was:

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

Laat daar 'n metode wees wat die stede uitskryf:

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

Laat ons in hierdie metode besluit om 'n sekere hulpmetode van die klas te gebruik. In hierdie geval sal die konteks verlore gaan:

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

Die probleem kan reggestel word, byvoorbeeld, deur 'n pylfunksie te gebruik:

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

Korrigeer die fout wat in die volgende kode gemaak is:

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