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