Mất ngữ cảnh trong OOP trong JavaScript

Khi làm việc với các lớp, ngữ cảnh có thể bị mất và this sẽ trỏ không phải đến đối tượng của lớp, mà đến một thứ gì đó khác. Hãy xem điều này có thể xảy ra như thế nào và cách xử lý nó.

Giả sử chúng ta có lớp User, chứa tên người dùng và một mảng các thành phố mà người dùng này đã đến:

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

Giả sử có một phương thức hiển thị các thành phố:

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

Giả sử trong phương thức này, chúng ta quyết định sử dụng một phương thức trợ giúp nào đó của lớp. Trong trường hợp này, ngữ cảnh sẽ bị mất:

class User {
	constructor(name, cities) {
		this.name = name;
		this.cities = cities;
	}
	
	showCities() {
		this.cities.forEach(function(city) {
			console.log(this.#cape(city)); // ngữ cảnh đã bị mất
		});
	}
	
	#cape(str) {
		return str[0].toUpperCase() + str.slice(1);
	}
}

Có thể sửa vấn đề, ví dụ, bằng cách sử dụng hàm mũi tên:

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

Hãy sửa lỗi đã mắc phải trong đoạn mã sau:

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