Konteksto pririšimas naudojant call metodą JavaScript

Taigi, jau išnagrinėjome, kaip iš tikrųjų veikia this. Dabar pažvelkime į metodus, kurie leidžia priverstinai nustatyti kontekstą, kuriame iškviečiama funkcija (tai yra, priversti ją sakyti, kam lygus this).

Pirmasis metodas, kurį nagrinėsime, vadinamas call. Pažiūrėkime, kaip jis veikia, su pavyzdžiu. Tarkime, kad turime įvesties lauką:

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

Gaukime nuorodą į šį įvesties lauką ir įrašykime ją į kintamąjį elem:

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

Dabar sukurkime funkciją func, kurios viduje atspausdinsime this.value į konsolę:

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

Kol kas mūsų funkcija nežino, kam this nurodo. Dabar, jei prijungtume ją per addEventListener, tai taip. Bet mes to nedarysime. Vietoj to, mes tiesiog iškviestume savo funkciją, pasakydami jai, kad this turi būti lygus elem.

Tai daroma taip: func.call(elem). Šis kodas yra lygiavertis paprastam funkcijos func iškvietimui taip: func(), tik su sąlyga, kad this yra lygus elem.

Taigi, call metodo sintaksė yra: function.call(object). Sudėkime viską kartu:

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

function func() {
	console.log(this.value); // atvaizduoja įvesties reikšmę
}
func.call(elem);

Duota funkcija:

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

Duoti trys įvesties laukai:

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

Naudodami call metodą ir func funkciją, atvaizduokite kiekvieno įvesties lauko value reikšmę.