JavaScript'te OOP'de Bağlam Kaybı

Sınıflarla çalışırken bağlam kaybolabilir ve this, sınıfın nesnesini değil de başka bir şeyi gösterebilir. Bunun nasıl olabileceğine ve bu konuda ne yapılacağına bir bakalım.

Bir User sınıfımız olduğunu varsayalım, bu sınıf kullanıcının adını ve bu kullanıcının bulunduğu şehirlerin bir dizisini içerir:

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

Şehirleri gösteren bir metod olduğunu varsayalım:

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

Diyelim ki bu metodun içinde sınıfın bazı yardımcı metodlarını kullanmaya karar verdik. Bu durumda bağlam kaybolacaktır:

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

Sorun, örneğin bir ok fonksiyonu tanımlayarak düzeltilebilir:

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