Хатои this дар коргузори ҷилавгири JavaScript

Вақти охир мода шудааст, ки дар ҳар ҷо ба ҷои функсияҳои одӣ аз функсияҳои ҷилавгир истифода баред. Аммо ин функсияҳо махсусияте доранд - онҳо this нигоҳ намедоранд. Биёед бубинем, ки бо кадом мушкилие сабаби ин метавонем рӯ ба рӯ шавем.

Бигзор мо як тугма дошта бошем:

<button>матн</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);
});