Kehilangan Konteks dalam OOP di JavaScript

Semasa bekerja dengan kelas, konteks boleh hilang dan this akan menunjuk bukan pada objek kelas, tetapi pada sesuatu yang lain. Mari kita lihat bagaimana ini boleh berlaku dan apa yang perlu dilakukan.

Katakan kita mempunyai kelas User, yang mengandungi nama pengguna dan array bandar-bandar yang dilawati oleh pengguna ini:

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

Katakan terdapat kaedah yang memaparkan bandar-bandar:

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

Katakan dalam kaedah ini, kami memutuskan untuk menggunakan beberapa kaedah pembantu kelas. Dalam kes 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 boleh diperbaiki, contohnya, dengan menggunakan fungsi anak 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);
	}
}

Betulkan ralat yang dilakukan dalam kod 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);