Kehilangan Konteks dalam OOP di JavaScript

Saat bekerja dengan kelas, konteks bisa hilang dan this akan menunjuk bukan pada objek kelas, tetapi pada sesuatu yang lain. Mari kita lihat bagaimana ini bisa terjadi dan apa yang harus dilakukan.

Misalkan kita memiliki kelas User, yang berisi nama pengguna dan array kota-kota yang pernah dikunjungi pengguna ini:

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

Misalkan ada metode yang menampilkan kota-kota:

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

Misalkan dalam metode ini kita memutuskan untuk menggunakan beberapa metode pembantu kelas. Dalam hal ini, konteks akan hilang:

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

Masalah dapat diperbaiki, misalnya, dengan menggunakan fungsi panah:

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