this у джаваскрипт

Dev IT JavaScript 152

this -- вказівник на поточний об'єкт.

У браузері глобальним об'єктом є window, до якого прив'язуються змінні та функції. Але ми не пишемо const window.name = 'Vasia Pupkin'; бо у цьому немає сенсу, пишемо скорочено: const name = 'Vasia Pupkin'; Те саме стосується функцій, які теж по дефолту глобальні. Себто якась рендомна функція test() є глобальною, буде частиною глобального об'єкта window і буде доступна по всьому коду.

У цьому і є основна заковика. На кого у певний момент цей this вказує.

1 варіант вирішення:

const obj1 = {
  name: 'obj1',
  arr: ['a', 'b', 'c'],
  func(){
    this.arr.forEach(function(item){ // анонімна функція є глобальною, тому this вказує на window
      console.log(this.name, item)
    }, this); // додаємо аргумент this, щоб вказівник показав на поточний об'єкт
  }
};

2 варіант вирішення:

const obj2 = {
  name: 'obj2',
  arr: ['d', 'e', 'f'],
  func(){
    const that = this; // зберігаємо вказівник у змінну
    this.arr.forEach(function(item){
      console.log(that.name, item)
    });
  }
};

3 варіант вирішення:

const obj3 = {
  name: 'obj3',
  arr: ['g', 'i', 'j'],
  func(){
    this.arr.forEach(item => { // стрілочна функція вказує на поточний об'єкт
      console.log(this.name, item)
    });
  }
};