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