Pierderea contextului în OOP în JavaScript

În timpul lucrului cu clase, contextul se poate pierde și this va indica nu către obiectul clasei, ci către altceva. Să vedem cum se poate întâmpla acest lucru și ce putem face în legătură cu asta.

Să presupunem că avem clasa User, care conține numele utilizatorului și un array de orașe în care acest utilizator a fost:

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

Să presupunem că există o metodă care afișează orașele:

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

Să presupunem că în această metodă am decis să folosim o anumită metodă auxiliară a clasei. În acest caz, contextul se va pierde:

javascriptclass User {
  constructor(name, cities) {
    this.name = name;
    this.cities = cities;
  }
  
  showCities() {
    this.cities.forEach(function(city) {
      console.log(this.#cape(city)); // contextul s-a pierdut
    });
  }
  
  #cape(str) {
    return str[0].toUpperCase() + str.slice(1);
  }
}

Putem remedia problema, de exemplu, prin utilizarea unei funcții săgeată:

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

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