Απώλεια περιβάλλοντος στην ΑΟΠ στο JavaScript

Κατά την εργασία με κλάσεις μπορεί να χαθεί το περιβάλλον και το this να δείχνει όχι στο αντικείμενο της κλάσης, αλλά σε κάτι άλλο. Ας δούμε πώς μπορεί να συμβεί αυτό και τι μπορούμε να κάνουμε γι' αυτό.

Ας υποθέσουμε ότι έχουμε μια κλάση User, που περιέχει το όνομα του χρήστη και έναν πίνακα με πόλεις στις οποίες αυτός ο χρήστης βρέθηκε:

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

Ας υποθέσουμε ότι υπάρχει μια μέθοδος που εμφανίζει τις πόλεις:

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

Ας υποθέσουμε ότι σε αυτή τη μέθοδο αποφασίσαμε να χρησιμοποιήσουμε κάποια βοηθητική μέθοδο της κλάσης. Σε αυτή την περίπτωση το περιβάλλον θα χαθεί:

javascriptclass User {
  constructor(name, cities) {
    this.name = name;
    this.cities = cities;
  }
  
  showCities() {
    this.cities.forEach(function(city) {
      console.log(this.#cape(city)); // το περιβάλλον χάθηκε
    });
  }
  
  #cape(str) {
    return str[0].toUpperCase() + str.slice(1);
  }
}

Μπορούμε να διορθώσουμε το πρόβλημα, για παράδειγμα, χρησιμοποιώντας μια arrow function:

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