Konteksti kaotamine OOP-s JavaScriptis

Klassidega töötamisel võib kontekst kaduda ja this ei viita klassi objektile, vaid millelegi muule. Vaatame, kuidas see võib juhtuda ja mida sellega teha.

Olgem meil klass User, mis sisaldab kasutaja nime ja massiivi linnadest, kus see kasutaja on käinud:

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

Olgem meetod, mis väljastab linnad:

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

Oletame, et selles meetodis otsustasime kasutada mõnda klassi abimeetodit. Sel juhul kontekst kaob:

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

Probleemi saab parandada, näiteks kasutades noolfunktsiooni:

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