Konteksta zudums OOP JavaScript

Strādājot ar klasēm, var pazust konteksts un this norādīs ne uz klases objektu, bet uz kaut ko citu. Apskatīsim, kā tas var notikt un ko ar to darīt.

Pieņemsim, ka mums ir klase User, kura satur lietotāja vārdu un masīvu ar pilsētām, kurās šis lietotājs atradies:

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

Pieņemsim, ka ir metode, kas izvada pilsētas:

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

Pieņemsim, ka šajā metodē mēs nolēmām izmantot kādu klases palīgmetodi. Šajā gadījumā konteksts pazudīs:

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

Problēmu var izlabot, piemēram, ievadot bultu funkciju:

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

Izlabojiet kļūdu, kas pieļauta sekojošā 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);