Mất ngữ cảnh trong OOP trong JavaScript

Khi làm việc với các lớp, ngữ cảnh có thể bị mất và this sẽ trỏ không phải đến đối tượng của lớp, mà đến một thứ gì đó khác. Hãy xem điều này có thể xảy ra như thế nào và cách xử lý nó.

Giả sử chúng ta có lớp User, chứa tên người dùng và một mảng các thành phố mà người dùng này đã đến:

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

Giả sử có một phương thức hiển thị các thành phố:

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

Giả sử trong phương thức này, chúng ta quyết định sử dụng một phương thức trợ giúp nào đó của lớp. Trong trường hợp này, ngữ cảnh sẽ bị mất:

javascriptclass User {
  constructor(name, cities) {
    this.name = name;
    this.cities = cities;
  }
  
  showCities() {
    this.cities.forEach(function(city) {
      console.log(this.#cape(city)); // ngữ cảnh đã bị mất
    });
  }
  
  #cape(str) {
    return str[0].toUpperCase() + str.slice(1);
  }
}

Có thể sửa vấn đề, ví dụ, bằng cách sử dụng hàm mũi tên:

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