Förlust av kontext i OOP i JavaScript

När man arbetar med klasser kan kontexten gå förlorad och this kommer att peka inte på klassens objekt, utan på något annat. Låt oss titta på hur detta kan hända och vad man kan göra åt det.

Låt oss säga att vi har en klass User, som innehåller användarens namn och en array av städer som denna användare har besökt:

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

Låt oss säga att det finns en metod som skriver ut städerna:

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

Låt oss säga att vi i denna metod bestämde oss för att använda någon hjälpmetod i klassen. I detta fall kommer kontexten att gå förlorad:

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

Man kan lösa problemet, till exempel, genom att introducera en pilfunktion:

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