Памылка this у стрэлачным апрацоўшчыку JavaScript

Апошнім часам стала модна ўжываць усюды стрэлачныя функцыі замест звычайных. Гэтыя функцыі, аднак, маюць падвох - яны не захоўваюць 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);
});