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

O próximo método bind permite vincular o contexto a uma função permanentemente. Como resultado, este método retorna uma nova função, dentro da qual this terá um valor rigidamente definido.

Vamos ver um exemplo.

Suponha que temos um input:

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

Suponha que a referência a este input esteja armazenada na variável elem:

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

Suponha que também temos a seguinte função func:

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

Vamos usar bind para criar uma nova função, que será uma cópia da função func, mas this nela sempre será igual a elem:

javascriptlet newFunc = func.bind(elem);

Agora, na variável newFunc há uma função. Vamos chamá-la, passando no primeiro parâmetro '1' e no segundo '2' (lembrando que em elem está o input com value igual a 'text'):

javascriptnewFunc('1', '2');

Vamos juntar tudo:

javascriptlet elem = document.getElementById('elem');

function func(param1, param2) {
  console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // exibirá 'text12'

Não é necessário armazenar o resultado do bind em uma nova função newFunc, pode-se simplesmente sobrescrever func. Após isso, func será a mesma função de antes, mas com o this rigidamente vinculado:

javascriptfunc = func.bind(elem);

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

javascriptlet elem = document.getElementById('elem');

function func(name, surname) {
  console.log(this.value + ', ' + name + ' ' + surname);
}

// escreva aqui a construção com bind()

func('John', 'Smit'); // deve exibir 'hello, John Smit'
func('Eric', 'Luis'); // deve exibir 'hello, Eric Luis'