Tabt kontekst i OOP i JavaScript

Når man arbejder med klasser, kan konteksten gå tabt, og this vil ikke pege på klasseobjektet, men på noget andet. Lad os se på, hvordan det kan ske, og hvad man kan gøre ved det.

Lad os sige, at vi har en klasse User, som indeholder brugerens navn og en matrix af byer, som denne bruger har været i:

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

Lad os sige, at der er en metode, der viser byerne:

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

Lad os sige, at vi i denne metode besluttede at bruge en hjælpemetode i klassen. I dette tilfælde vil konteksten gå tabt:

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

Problemet kan løses, for eksempel, ved at introducere 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);