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

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

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

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

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

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

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

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

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

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

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

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

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

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

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