ข้อผิดพลาด 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);
});