Tapning av kontekst i OOP i JavaScript

Ved arbeid med klasser kan konteksten gå tapt og this vil peke ikke på klasseobjektet, men på noe annet. La oss se hvordan dette kan skje og hva vi kan gjøre med det.

La oss si at vi har en klasse User, som inneholder brukerens navn og en array av byer som denne brukeren har besøkt:

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

La oss si at det er en metode som viser byene:

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

La oss si at i denne metoden bestemte vi oss for å bruke en eller annen hjelpemetode i klassen. I dette tilfellet vil konteksten gå tapt:

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

Problemet kan løses, for eksempel, ved å innføre en pilfunksjon:

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