Привязывание контекста через метод call в JavaScript

Итак, мы разобрали, как на самом деле работает this. Давайте теперь рассмотрим методы, которые позволяют принудительно указать, в каком контексте вызывается функция (то есть принудительно сказать, чему равен this).

Первый метод, который мы разберем, называется call. Давайте посмотрим на его работу на примере. Пусть у нас есть инпут:

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

Давайте получим ссылку на этот инпут и запишем ее в переменную 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 инпута
}
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">