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

Tehát megértettük, hogyan működik valójában a this. Most nézzük meg azokat a módszereket, amelyek lehetővé teszik, hogy kényszerítsük egy függvény kontextusát (azaz kényszerítsük, hogy mi legyen egyenlő a this-vel).

Az első metódus, amelyet megvizsgálunk, a call nevet viseli. Nézzük a működését egy példán keresztül. Tegyük fel, hogy van egy inputunk:

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

Kapjuk meg ennek az inputnak a hivatkozását és mentsük el egy elem nevű változóba:

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

Most készítsünk egy func nevű függvényt, amelyben kiírjuk a this.value értékét:

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

Jelenleg a függvényünk nem tudja, mire hivatkozik a this. Ha hozzárendelnénk egy addEventListener-el, akkor igen. De ezt nem fogjuk megtenni. Ehelyett egyszerűen csak meghívjuk a függvényünket, és megmondjuk neki, hogy a this legyen egyenlő az elem-mel.

Ez a következőképpen történik: func.call(elem). Ez a kód egyenértékű a függvény egyszerű meghívásával func így: func(), azzal a különbséggel, hogy a this egyenlő elem-mel.

Tehát a call metódus szintaxisa: függvény.call(objektum). Állítsuk össze mindet:

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

function func() {
	console.log(this.value); // kiírja az input value értékét
}
func.call(elem);

Adott egy függvény:

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

Adott három input:

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

A call metódus és a func függvény segítségével írja ki mindegyik input value értékét.