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:

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

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

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

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

javascriptfunction 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ā:

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

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

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

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