Kehilangan Konteks dalam OOP di JavaScript

Saat bekerja dengan kelas, konteks bisa hilang dan this akan menunjuk bukan pada objek kelas, tetapi pada sesuatu yang lain. Mari kita lihat bagaimana ini bisa terjadi dan apa yang harus dilakukan.

Misalkan kita memiliki kelas User, yang berisi nama pengguna dan array kota-kota yang pernah dikunjungi pengguna ini:

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

Misalkan ada metode yang menampilkan kota-kota:

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

Misalkan dalam metode ini kita memutuskan untuk menggunakan beberapa metode pembantu kelas. Dalam hal ini, konteks akan hilang:

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

Masalah dapat diperbaiki, misalnya, dengan menggunakan fungsi panah:

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

Perbaiki kesalahan yang dilakukan dalam kode berikut:

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