Vinculando contexto através do método call em JavaScript

Então, já descobrimos como this realmente funciona. Vamos agora examinar os métodos que permitem indicar forçadamente em qual contexto uma função é chamada (ou seja, dizer forçadamente a que this é igual).

O primeiro método que vamos examinar chama-se call. Vamos ver o seu funcionamento com um exemplo. Suponha que temos um input:

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

Vamos obter a referência para este input e armazená-la na variável elem:

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

Agora, vamos criar uma função func, dentro da qual vamos exibir this.value:

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

Por enquanto, nossa função não sabe a que this se refere. Se a vinculássemos via addEventListener, aí sim. Mas não vamos fazer isso. Em vez disso, vamos simplesmente chamar nossa função, dizendo a ela que this deve ser igual a elem.

Isso é feito assim: func.call(elem). Este código é equivalente a simplesmente chamar a função func assim: func(), apenas com a condição de que this seja igual a elem.

Então, a sintaxe do método call é: função.call(objeto). Vamos juntar tudo:

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

function func() {
  console.log(this.value); // exibirá o value do 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">