Δέσμευση του περιβάλλοντος μέσω της μεθόδου call στην JavaScript

Λοιπόν, έχουμε αναλύσει πώς πραγματικά λειτουργεί this. Ας εξετάσουμε τώρα τις μεθόδους που μας επιτρέπουν να καθορίσουμε υποχρεωτικά σε ποιο περιβάλλον καλείται μια συνάρτηση (δηλαδή να πούμε υποχρεωτικά, τι ισούται με this).

Η πρώτη μέθοδος που θα αναλύσουμε ονομάζεται call. Ας δούμε τη λειτουργία της με ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε ένα input:

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

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

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

Ας δημιουργήσουμε τώρα μια συνάρτηση func, μέσα στην οποία θα εμφανίσουμε το this.value:

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

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

Αυτό γίνεται ως εξής: func.call(elem). Αυτός ο κώδικας είναι ισοδύναμος με μια απλή κλήση της συνάρτησης func ως εξής: func(), μόνο με την προϋπόθεση ότι το this ισούται με elem.

Λοιπόν, η σύνταξη της μεθόδου call είναι: συνάρτηση.call(αντικείμενο). Ας συγκεντρώσουμε όλα μαζί:

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

function func() {
	console.log(this.value); // θα εμφανίσει το value του input
}
func.call(elem);

Δίνεται συνάρτηση:

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

Δίνονται τρία inputs:

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

Με τη βοήθεια της μεθόδου call και της συνάρτησης func εμφανίστε στην οθόνη το value κάθε input.