JavaScript OOP에서의 컨텍스트 손실

클래스를 다룰 때 컨텍스트가 손실되어 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);
  }
}

예를 들어, 화살표 함수를 도입하여 문제를 해결할 수 있습니다:

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