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

Η επόμενη μέθοδος bind επιτρέπει τη μόνιμη δέσμευση του περιβάλλοντος σε μια συνάρτηση. Ως αποτέλεσμα αυτή η μέθοδος επιστρέφει μια νέα συνάρτηση, μέσα στην οποία το this θα έχει μια αυστηρά καθορισμένη τιμή.

Ας δούμε ένα παράδειγμα.

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

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

Ας υποθέσουμε ότι ο σύνδεσμος για αυτό το input είναι αποθηκευμένος στη μεταβλητή elem:

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

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

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

Ας χρησιμοποιήσουμε το bind για να δημιουργήσουμε μια νέα συνάρτηση, η οποία θα είναι αντίγραφο της συνάρτησης func, αλλά το this σε αυτήν θα είναι πάντα ίσο με το elem:

javascriptlet newFunc = func.bind(elem);

Τώρα στη μεταβλητή newFunc βρίσκεται μια συνάρτηση. Ας την καλέσουμε, περνώντας ως πρώτη παράμετρο το '1', και ως δεύτερη το '2' (υπενθυμίζω ότι στο elem βρίσκεται ένα input με value, ίσο με 'text'):

javascriptnewFunc('1', '2');

Ας τα συγκεντρώσουμε όλα μαζί:

javascriptlet elem = document.getElementById('elem');

function func(param1, param2) {
  console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // θα τυπώσει 'text12'

Δεν είναι απαραίτητο να αποθηκεύσουμε το αποτέλεσμα της λειτουργίας της bind σε μια νέα συνάρτηση newFunc, μπορούμε απλά να αντικαταστήσουμε την func. Μετά από αυτό, η func θα είναι η ίδια συνάρτηση όπως ήταν, αλλά με σκληρά δεσμευμένο this:

javascriptfunc = func.bind(elem);

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

javascriptlet elem = document.getElementById('elem');

function func(name, surname) {
  console.log(this.value + ', ' + name + ' ' + surname);
}

// εδώ γράψτε την κατασκευή με bind()

func('John', 'Smit'); // εδώ θα πρέπει να τυπώσει 'hello, John Smit'
func('Eric', 'Luis'); // εδώ θα πρέπει να τυπώσει 'hello, Eric Luis'