Konteksverlies in OOP in JavaScript

Wanneer met klasse gewerk word, kan die konteks verlore gaan en sal this nie na die klasvoorwerp wys nie, maar na iets anders. Kom ons kyk hoe dit kan gebeur en wat om daaraan te doen.

Laat ons 'n klas User hê, wat die gebruiker se naam en 'n array van stede bevat waarin hierdie gebruiker was:

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

Laat daar 'n metode wees wat die stede uitskryf:

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

Laat ons in hierdie metode besluit om 'n sekere hulpmetode van die klas te gebruik. In hierdie geval sal die konteks verlore gaan:

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

Die probleem kan reggestel word, byvoorbeeld, deur 'n pylfunksie te gebruik:

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