Βασικές αρχές εργασίας με το context στο JavaScript

Ας υποθέσουμε ότι έχουμε κάποια συνάρτηση func, μέσα στην οποία χρησιμοποιείται το this:

function func() {
	console.log(this.value);
}

Σε τι δείχνει το this σε αυτή τη συνάρτηση; Κι εμείς δεν ξέρουμε. Και το JavaScript δεν ξέρει. Και η ίδια η συνάρτηση δεν ξέρει. Δηλαδή τη στιγμή δημιουργίας της συνάρτησης, το σε τι ακριβώς δείχνει το this, δεν έχει καθοριστεί. Και θα καθοριστεί μόνο όταν καλεστεί αυτή η συνάρτηση.

Ας υποθέσουμε ότι έχουμε κάποιο input:

<input id="elem" value="text">

Ας δέσουμε σε αυτό το input τη συνάρτησή μας func έτσι ώστε να εκτελείται όταν χάσει το focus το input. Τώρα τη στιγμή εκτέλεσης της συνάρτησης το this θα δείχνει στο input μας:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // όταν χάσει το focus θα εμφανίσει 'text'
}

Αλλά μπορεί να μην έχουμε μόνο ένα input, αλλά πολλά:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

Και σε κάθε ένα από αυτά τα inputs μπορούμε να δέσουμε τη συνάρτησή μας func. Σε αυτή την περίπτωση για το πρώτο στοιχείο το this τη στιγμή κλήσης της συνάρτησης θα δείχνει σε αυτό, ενώ για το δεύτερο - σε αυτό.

Στην πράξη αυτό σημαίνει ότι το this μέσα στη συνάρτηση εξαρτάται από το σε ποιο input χάσαμε το focus:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // θα εμφανίσει είτε 'text1' είτε 'text2'
}

Γενικά, αυτό το χαρακτηριστικό του this είναι πολύ βολικό - δημιουργούμε μόνο μία συνάρτηση και τη δένουμε σε οποιοδήποτε αριθμό inputs. Αν το this δεν έδειχνε στο στοιχείο στο οποίο συνέβη το event, τότε εμείς δεν θα μπορούσαμε να το κάνουμε αυτό - θα έπρεπε για κάθε input να δημιουργούμε τη δική του συνάρτηση με τον ίδιο κώδικα!