Kehilangan Konteks dalam OOP di JavaScript

Semasa bekerja dengan kelas, konteks boleh hilang dan this akan menunjuk bukan pada objek kelas, tetapi pada sesuatu yang lain. Mari kita lihat bagaimana ini boleh berlaku dan apa yang perlu dilakukan.

Katakan kita mempunyai kelas User, yang mengandungi nama pengguna dan array bandar-bandar yang dilawati oleh pengguna ini:

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

Katakan terdapat kaedah yang memaparkan bandar-bandar:

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

Katakan dalam kaedah ini, kami memutuskan untuk menggunakan beberapa kaedah pembantu kelas. Dalam kes 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 boleh diperbaiki, contohnya, dengan menggunakan fungsi anak 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);