A kontextus kötése a bind metódussal JavaScriptben

A következő metódus bind lehetővé teszi, hogy a kontextust véglegesen kössük egy függvényhez. Ez a metódus egy új függvénnyel tér vissza, amelyben a this értéke rideg módon be lesz állítva.

Nézzünk egy példát.

Tegyük fel, hogy van egy inputunk:

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

Tegyük fel, hogy ennek az inputnak a hivatkozása a elem változóban van:

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

Tegyük fel, hogy van a következő func függvényünk:

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

Készítsünk a bind segítségével egy új függvényt, amely a func függvény másolata, de a this benne mindig elem lesz:

javascriptlet newFunc = func.bind(elem);

Most a newFunc változóban egy függvény található. Hívjuk meg úgy, hogy az első paraméternek '1'-et, a másodiknak pedig '2'-t adunk át (emlékeztetőül: az elem egy input, melynek value értéke 'text'):

javascriptnewFunc('1', '2');

Hozzuk össze az egészet:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // kiírja 'text12'

Nem feltétlenül kell a bind eredményét egy új newFunc függvénybe menteni, egyszerűen felülírhatjuk a func-ot is. Ezek után a func ugyanaz a függvény lesz, mint amilyen volt, de a this értéke ridegen kötve lesz hozzá:

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);
}

// írja ide a bind() metódussal történő kifejezést

func('John', 'Smit'); // itt kell, hogy kiírja: 'hello, John Smit'
func('Eric', 'Luis'); // itt kell, hogy kiírja: 'hello, Eric Luis'