Konteksti kaotamine OOP-s JavaScriptis

Klassidega töötamisel võib kontekst kaduda ja this ei viita klassi objektile, vaid millelegi muule. Vaatame, kuidas see võib juhtuda ja mida sellega teha.

Olgem meil klass User, mis sisaldab kasutaja nime ja massiivi linnadest, kus see kasutaja on käinud:

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

Olgem meetod, mis väljastab linnad:

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

Oletame, et selles meetodis otsustasime kasutada mõnda klassi abimeetodit. Sel juhul kontekst kaob:

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

Probleemi saab parandada, näiteks kasutades noolfunktsiooni:

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

Parandage viga, mis on tehtud järgmises koodis:

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