Свързване на контекст чрез метода call в JavaScript

И така, разбрахме как всъщност работи this. Нека сега разгледаме методите, които позволяват принудително да укажем, в какъв контекст се извиква функция (то ест принудително да кажем, на какво е равен this).

Първият метод, който ще разгледаме, се нарича call. Нека разгледаме неговата работа с пример. Нека имаме input поле:

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

Нека получим референция към това input поле и я запишем в променлива elem:

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

Нека сега направим функция func, вътре в която извеждаме this.value:

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

Засега нашата функция не знае към какво сочи this. Ето, ако я свържем чрез addEventListener, тогава да. Но ние няма да правим това. Вместо това просто ще извикаме нашата функция, като й кажем, че this трябва да е равен на elem.

Това се прави ето така: func.call(elem). Този код е еквивалентен на просто извикване на функцията func ето така: func(), само с условието, че this е равен на elem.

И така, синтаксисът на метода call е такъв: функция.call(обект). Нека съберем всичко заедно:

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

function func() {
  console.log(this.value); // ще изведе value на input полето
}
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">