Πλεονέκτημα του this στην JavaScript

Από όσα ειπώθηκαν προηγουμένως δεν είναι προφανές το ιδιαίτερο πλεονέκτημα του this. Εξάλλου, μέσα στη συνάρτηση-χειριστή θα είναι προσβάσιμο το στοιχείο μας - αφού η μεταβλητή elem θα είναι καθολική για τη συνάρτησή μας func:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// εδώ είναι προσβάσιμη η μεταβλητή elem με το στοιχείο μας
}

Και, δεν είναι δύσκολο να συμπεράνει κανείς, ότι τα περιεχόμενα του this και τα περιεχόμενα της μεταβλητής elem στην περίπτωσή μας είναι ίσα:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // θα εμφανίσει true
}

Ποιο είναι λοιπόν το ιδιαίτερο πλεονέκτημα του this; Εμφανίζεται όταν έχουμε πολλά στοιχεία, και σε κάθε ένα έχει συνδεθεί η ίδια συνάρτηση.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε 3 κουμπιά:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Ας πάρουμε αναφορές σε αυτά σε μεταβλητές:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Ας συνδέσουμε σε αυτά τα κουμπιά την ίδια συνάρτηση:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Και μέσα στη συνάρτηση θα εμφανίζουμε το this.value:

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

Θα συμβεί ότι έχουμε τρία κουμπιά. Το πάτημα κάθε κουμπιού θα οδηγεί στην κλήση της συνάρτησης func. Ταυτόχρονα, σε κάθε κλικ το this θα περιέχει αναφορά στο κουμπί στο οποίο συνέβη το συμβάν.

Δηλαδή, κάθε πάτημα θα εμφανίζει στην κονσόλα το value του κουμπιού στο οποίο συνέβη το πάτημα, αλλά αυτό θα το κάνει η ίδια συνάρτηση func! Αυτό είναι το πλεονέκτημα της χρήσης του this.

Δίνονται 5 παράγραφοι με κάποια κείμενα. Με κλικ σε οποιαδήποτε παράγραφο, γράψτε στο τέλος του κειμένου της ένα θαυμαστικό.

Δίνονται 3 πεδία εισαγωγής, στα οποία έχουν εισαχθεί κάποιοι αριθμοί. Όταν χάσει την εστίαση οποιοδήποτε από τα πεδία εισαγωγής, υψώστε τον αριθμό που περιέχει στο τετράγωνο.