Lỗi this trong trình xử lý hàm mũi tên JavaScript

Gần đây, việc sử dụng hàm mũi tên ở mọi nơi thay cho hàm thông thường đã trở thành mốt. Tuy nhiên, những hàm này có một điểm trừ - chúng không giữ this. Hãy cùng xem xét vấn đề có thể gặp phải vì điều này.

Giả sử chúng ta có một nút bấm:

<button>text</button>

Lấy tham chiếu đến nút này vào biến:

let button = document.querySelector('button');

Gắn trình xử lý sự kiện cho nút, sử dụng hàm mũi tên:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

Đây là lúc bất ngờ ập đến: this trong hàm mũi tên sẽ không đề cập đến phần tử nơi sự kiện xảy ra.

Hãy xem chúng ta có thể làm gì với điều này.

Giải pháp thứ nhất

Có thể từ bỏ việc sử dụng this và sử dụng biến mà sự kiện được gắn vào:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

Giải pháp thứ hai

Có thể lấy phần tử mà sự kiện được gắn vào thông qua event.target:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

Giải pháp thứ ba

Có thể từ bỏ hàm mũi tên và sử dụng hàm thông thường:

button.addEventListener('click', function() {
	console.log(this.textContent);
});