Το σφάλμα this στο βέλους χειριστή JavaScript

Τελευταία, έχει γίνει της μόδας να χρησιμοποιούνται παντού arrow functions αντί για τις συνηθισμένες. Αυτές οι συναρτήσεις, ωστόσο, έχουν μια παγίδα - δεν διατηρούν το this. Ας δούμε με ποιο πρόβλημα μπορούμε να συναντηθούμε εξαιτίας αυτού.

Ας υποθέσουμε ότι έχουμε ένα κουμπί:

<button>κείμενο</button>

Ας πάρουμε μια αναφορά σε αυτό το κουμπί σε μια μεταβλητή:

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

Ας προσθέσουμε έναν χειριστή γεγονότος στο κουμπί, χρησιμοποιώντας μια arrow function:

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

Εδώ μας περιμένει μια έκπληξη: το this στην arrow function δεν θα αναφέρεται στο στοιχείο στο οποίο συνέβη το γεγονός.

Ας δούμε τι μπορούμε να κάνουμε με αυτό.

Πρώτη λύση

Μπορείτε να αποφύγετε τη χρήση του this και να χρησιμοποιήσετε τη μεταβλητή, στην οποία έχει δεσμευτεί το γεγονός:

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

Δεύτερη λύση

Μπορείτε να λάβετε το στοιχείο, στο οποίο έχει δεσμευτεί το γεγονός, μέσω του event.target:

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

Τρίτη λύση

Μπορείτε να αποφύγετε την arrow function και να χρησιμοποιήσετε μια κανονική συνάρτηση:

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