Pérdida de contexto en POO en JavaScript
Al trabajar con clases puede perderse
el contexto y this apuntará
no al objeto de la clase, sino a otra cosa.
Veamos cómo puede suceder esto
y qué hacer al respecto.
Supongamos que tenemos una clase User,
que contiene el nombre del usuario y un array
de ciudades en las que este usuario
ha estado:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
}
Supongamos que hay un método que muestra las ciudades:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
showCities() {
this.cities.forEach(function(city) {
console.log(city);
});
}
}
Supongamos que en este método decidimos usar algún método auxiliar de la clase. En este caso el contexto se perderá:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
showCities() {
this.cities.forEach(function(city) {
console.log(this.#cape(city)); // el contexto se perdió
});
}
#cape(str) {
return str[0].toUpperCase() + str.slice(1);
}
}
Se puede solucionar el problema, por ejemplo, usando una función flecha:
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);
}
}
Corrija el error cometido en el siguiente código:
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);