Потеря контекста в ООП в JavaScript
При работе с классами может теряться
контекст и this будет указывать
не на объект класса, а на что-то другое.
Давайте посмотрим как это может произойти
и что с этим делать.
Пусть у нас есть класс User,
который содержит имя юзера и массив
городов, в которых этот юзер
был:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
}
Пусть есть метод, который выводит города:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
showCities() {
this.cities.forEach(function(city) {
console.log(city);
});
}
}
Пусть в этом методе мы решили использовать некоторый вспомогательный метод класса. В этом случае контекст и потеряется:
class User {
constructor(name, cities) {
this.name = name;
this.cities = cities;
}
showCities() {
this.cities.forEach(function(city) {
console.log(this.#cape(city)); // контекст потерялся
});
}
#cape(str) {
return str[0].toUpperCase() + str.slice(1);
}
}
Можно исправить проблему, например, введя стрелочную функцию:
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);
}
}
Исправьте ошибку, допущенную в следующем коде:
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);