Verlies van context in OOP in JavaScript

Bij het werken met klassen kan de context verloren gaan en zal this niet wijzen naar het object van de klasse, maar naar iets anders. Laten we kijken hoe dit kan gebeuren en wat we eraan kunnen doen.

Stel dat we een klasse User hebben, die de naam van de gebruiker en een array van steden bevat waar deze gebruiker is geweest:

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

Stel dat er een methode is die de steden weergeeft:

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

Stel dat we in deze methode besloten hebben een bepaalde hulpmethode van de klasse te gebruiken. In dit geval zal de context verloren gaan:

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

Het probleem kan worden opgelost, bijvoorbeeld door een pijlfunctie te introduceren:

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