Konteksta piesaiste izmantojot call metodi JavaScript

Tātad, mēs izskatījām, kā patiesībā strādā this. Tagad apskatīsim metodes, kas ļauj piespiedu kārtā norādīt, kādā kontekstā tiek izsaukta funkcija (tas ir, piespiedu kārtā pateikt, kam ir vienāds this).

Pirmā metode, ko mēs izskatīsim, saucas call. Apskatīsim tās darbību ar piemēru. Pieņemsim, ka mums ir ievades lauks:

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

Iegūsim atsauci uz šo ievades lauku un ierakstīsim to mainīgajā elem:

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

Tagad izveidosim funkciju func, kuras iekšienē izvadīsim this.value:

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

Pagaidām mūsu funkcija nezina, uz ko atsaucas this. Ja mēs to piesaistītu izmantojot addEventListener, tad jā. Bet mēs to nedarīsim. Tā vietā mēs vienkārši izsauksim mūsu funkciju, pateicot tai, ka this jābūt vienādam ar elem.

Tas tiek darīts šādi: func.call(elem). Šis kods ir līdzvērtīgs vienkāršai funkcijas izsaukšanai func šādi: func(), tikai ar nosacījumu, ka this ir vienāds ar elem.

Tātad, call metodes sintakse ir šāda: funkcija.call(objekts). Apvienosim viss kopā:

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

function func() {
	console.log(this.value); // izvadīs ievades lauka value
}
func.call(elem);

Dota funkcija:

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

Doti trīs ievades lauki:

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

Ar call metodes call un funkcijas func palīdzību izvadiet uz ekrānu katras ievades lauka value.