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