Perda de Contexto em POO em JavaScript
Ao trabalhar com classes, o contexto pode ser perdido
e this
passará a apontar
não para o objeto da classe, mas para outra coisa.
Vamos ver como isso pode acontecer
e o que fazer a respeito.
Suponha que temos uma classe User
,
que contém o nome do usuário e um array
de cidades onde esse usuário
esteve:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
}
Suponha que haja um método que exibe as cidades:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
showCities() {
this.cities.forEach(function(city) {
console.log(city);
});
}
}
Suponha que neste método decidimos usar algum método auxiliar da classe. Neste caso, o contexto será perdido:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
showCities() {
this.cities.forEach(function(city) {
console.log(this.#cape(city)); // contexto perdido
});
}
#cape(str) {
return str[0].toUpperCase() + str.slice(1);
}
}
É possível corrigir o problema, por exemplo, usando uma função de seta:
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 o erro cometido no seguinte 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);