Konteksta zudums OOP JavaScript

Strādājot ar klasēm, var pazust konteksts un this norādīs ne uz klases objektu, bet uz kaut ko citu. Apskatīsim, kā tas var notikt un ko ar to darīt.

Pieņemsim, ka mums ir klase User, kura satur lietotāja vārdu un masīvu ar pilsētām, kurās šis lietotājs atradies:

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

Pieņemsim, ka ir metode, kas izvada pilsētas:

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

Pieņemsim, ka šajā metodē mēs nolēmām izmantot kādu klases palīgmetodi. Šajā gadījumā konteksts pazudīs:

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

Problēmu var izlabot, piemēram, ievadot bultu funkciju:

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