JavaScriptда 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);
});