Kontekstin menettäminen OOP:ssa JavaScriptissä

Luokkien kanssa työskennellessä konteksti voi kadota ja this osoittaa ei luokan olioon, vaan johonkin muuhun. Katsotaan kuinka tämä voi tapahtua ja mitä sille tehdä.

Olkoon meillä luokka User, joka sisältää käyttäjän nimen ja taulukon kaupungeista, joissa tämä käyttäjä on käynyt:

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

Olkoon metodi, joka tulostaa kaupungit:

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

Olkoon tässä metodissa päätimme käyttää jotain luokan apumetodia. Tässä tapauksessa konteksti katoaa:

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

Ongelman voi korjata esimerkiksi käyttämällä nuolifunktiota:

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