Kupoteza Muktadha katika OOP katika JavaScript

Wakati wa kufanya kazi na madarasa muktadha unaweza kupotea na this itaelekeza sio kwenye kitu cha darasa, lakini kwa kitu kingine. Wacha tuone jinsi hii inaweza kutokea na nini cha kufanya kuhusu hilo.

Wacha tuwe na darasa User, ambalo lina jina la user na safu ya miji, ambayo user huyu amewahi kuwa:

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

Wacha tuwe na mbinu, inayoonyesha miji:

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

Wacha katika mbinu hii tumeamua kutumia baadhi ya mbinu za msaidizi za darasa. Katika kesi hii muktadha utapotea:

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

Inawezekana kurekebisha tatizo, kwa mfano, kwa kuanzisha kitendakazi cha mshale:

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

Rekebisha hitilafu, iliyofanywa katika msimbo ufuatao:

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