Kupoteza Muktadha katika OOP katika JavaScript

Wakati wa kufanya kazi na madarasa muktadha unaweza kupotea na this itaelekeza sio kwenye kitu cha darasa, lakini kwa kitu kingine. Wacha tuone jinsi hii inaweza kutokea na nini cha kufanya kuhusu hilo.

Wacha tuwe na darasa User, ambalo lina jina la user na safu ya miji, ambayo user huyu amewahi kuwa:

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

Wacha tuwe na mbinu, inayoonyesha miji:

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

Wacha katika mbinu hii tumeamua kutumia baadhi ya mbinu za msaidizi za darasa. Katika kesi hii muktadha utapotea:

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

Inawezekana kurekebisha tatizo, kwa mfano, kwa kuanzisha kitendakazi cha mshale:

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