Грешка this у стреластим обработчику ЈаваСкрипта

Последње време је постало модерно свуда користити стреласте функције уместо обичних. Ове функције, међутим, имају зачку - оне не чувају this. Хајде да погледамо са каквим проблемом се можемо сусрести због овога.

Нека имамо дугме:

<button>text</button>

Добијмо референцу на ово дугме у променљиву:

let button = document.querySelector('button');

Додајмо дугмету догађајни обработник, користећи се стреластом функцијом:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

Ево где нас чека изненађење: this у стреластој функцији неће се односити на елемент у којем се догађај десио.

Хајде да погледамо шта се са тим може урадити.

Прво решење

Може се одустати од коришћења this и употребити променљиву на коју је везан догађај:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

Друго решење

Елемент на који је везан догађај се може добити преко event.target:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

Треће решење

Може се одустати од стреласте функције и употребити обичну:

button.addEventListener('click', function() {
	console.log(this.textContent);
});