შეცდომა 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);
});